Html 使主滚动条始终可见

当用户访问网页时（当网页没有足够的内容触发滚动条激活时），需要什么样的CSS才能使浏览器的垂直滚动条保持可见

这就是你想要的吗

不幸的是，Opera9.64在应用于

HTML

或

BODY

时似乎忽略了CSS声明，尽管它适用于其他块级元素，如

DIV

html {
    overflow: -moz-scrollbars-vertical; 
    overflow-y: scroll;
}

这使滚动条始终可见，并且仅在需要时才处于活动状态

更新：如果上述方法不起作用，则仅使用此方法即可

html {
    overflow-y:scroll;
}

我使用这个跨浏览器解决方案（注意：我总是在第一行使用DOCTYPE声明，我不知道它是否在怪癖模式下工作，从未测试过）

这将始终显示一个活动的垂直滚动条在每个页面中，垂直滚动条只能滚动几个像素

当页面内容比浏览器的可见区域（查看端口）短时，您仍然可以看到垂直滚动条处于活动状态，并且它只能滚动几个像素

---

如果你沉迷于CSS验证（我只对HTML验证感兴趣），通过使用这个解决方案，你的CSS代码也会对W3C进行验证，因为你没有使用非标准的CSS属性，比如

-moz滚动条垂直
将高度设置为101%是我解决这个问题的方法。
当在超过视口高度的页面和不超过视口高度的页面之间切换时，您的页面将不再“翻转”。
我通过将其添加到body标记中来实现这一点。对我来说更好，因为我没有任何关于html元素的内容

body {
    overflow-y: scroll;
}

过去几年，情况发生了变化。以上答案不再适用于所有情况。苹果正在到处推广。MacOs（和iOs）上的Safari、Chrome甚至Firefox只在实际滚动时显示滚动条——我不知道当前的Windows/IE。但是，在Webkit上有非标准的样式设置方式（IE很久以前就放弃了这种方式）。
另一种方法是将html元素的宽度设置为100vw。在大多数浏览器上，这会抵消滚动条对宽度的影响

html { width: 100vw; }

确保溢出设置为“滚动”而不是“自动”。在OSX Lion中，溢出设置为“滚动”的行为更像自动，因为滚动条仅在使用时才会显示。因此，如果上述任何解决方案似乎不起作用，这可能就是原因

这是您需要解决的问题：

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}
::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

如果不喜欢默认设置，可以相应地设置样式。
正文{height:101%；}
将“裁剪”较大的页面

相反，我使用：

body { min-height:101%; }

最适合我
我这样做：

html {
    margin-left: calc(100vw - 100%);
    margin-right: 0;
}

这样我就不必在不需要的时候看那丑陋的灰色滚动条了

html { height:initial!important; }

你可能不需要这个！重要信息-取决于CSS的位置。
您是否知道FF的哪个版本支持了
overflow-y
？似乎
-moz滚动条垂直
被弃用，取而代之的是
overflow-y
属性。如果我没记错的话，我认为Internet Explorer 6.x+、Firefox 1.5+。我一直在使用上面的代码，它在FF1.5-3.5.1和IE6-8中对我有效。当你网站上的某些页面太小而没有滚动条，而其他页面太小时，有没有其他方法可以替代“页面跳转”？还是这是“最佳实践”？我必须承认，我在网上没有看到很多不占用整页的页面。我不确定这是否是一种最佳做法，但是，在所有页面上都有滚动条，并且只有在必要时才激活滚动条，以避免页面跳转通常是一种可接受的解决方案。我倾向于使用常量滚动条而不是跳转。对于那些（像我一样）觉得样式设置
html
有点粗糙的人，请注意，您可以使用结构伪选择器
：root
，而不是
html
。看到了吗：但是在那些新的滚动条上它会优雅地退化吗？谢谢你在消失的滚动条上的这一点。对我来说，保持滚动条可见的原因是为了避免在内容从有滚动变为无滚动时出现轻微但非常明显且非常烦人的抖动。随着消失的滚动条，他们不挺举身体时，他们显示和隐藏，所以它的确定为我。但是谢谢你的这一点。从用户体验的角度来看，大多数时候我们都希望滚动条可见。根据当前趋势，如果滚动条不可见，则必须“尝试”可见列表以获取列表中的更多信息，这是额外的步骤。如果人们看到滚动条，则不需要提供下拉列表或列表中有更多项目的额外视觉线索。这个问题是5年前提出的，已经有了公认的答案。您的答案提供的答案并不比已接受的答案更好。此答案实际上提供了其他答案中未提供的其他信息。优雅的解决方案可防止出现错误。此方法有效！但是你怎么能只在一个特定的div上使用它呢？@Rich就像其他css元素一样。yourdiv:：-webkit滚动条{…}@Kris Hi，谢谢你的回答，下面是一个例子。为什么使用此
-webkit外观：无问题要求它始终可见。
body { 
    min-height: 101vh; 
} 

html {
    margin-left: calc(100vw - 100%);
    margin-right: 0;
}

html { height:initial!important; }