使主滚动条始终可见

当用户访问网页时（当页面内容不足以触发滚动条激活时），使浏览器的垂直滚动条保持可见状态需要什么CSS？

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

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

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

html {
    overflow-y:scroll;
}

确保将溢出设置为“滚动”而不是“自动”。话虽如此，在OS X Lion中，设置为“ scroll”的溢出行为更像auto，因为滚动条仍仅在使用时显示。因此，如果上述任何解决方案似乎都不起作用，那可能就是原因。

这是您需要解决的问题：

::-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);
}

如果您不喜欢默认样式，则可以相应地设置样式。

过去几年，情况发生了变化。以上答案在所有情况下都不再有效。苹果正在各地推销消失的滚动条。MacO（和iO）上的Safari，Chrome甚至Firefox仅在实际滚动时显示滚动条-我不知道当前的Windows / IE。但是，在Webkit上有一些非标准的样式来设置滚动条的样式（很久以前IE就已删除）。

html {
    overflow-y: scroll;
}

那是你要的吗？

不幸的是，Opera 9.64在应用于HTML或时似乎忽略了该CSS声明BODY，尽管它适用于其他块级元素，例如DIV。

html {height: 101%;}

我使用此跨浏览器解决方案 （请注意：我总是在第一行中使用DOCTYPE声明，我不知道它是否在quirksmode下工作，从未测试过）。

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

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

如果您通过使用此解决方案而对CSS验证感到迷惑（我仅对HTML验证很执迷），那么您的CSS代码也将针对W3C进行验证，因为您未使用非标准CSS属性，例如 -moz-scrollbars-vertical

body { height:101%; } 将“裁剪”较大的页面。

相反，我使用：

body { min-height:101%; }

通过将它添加到body标签，我能够使它正常工作。对我来说更好，因为html元素上没有任何内容。

body {
    overflow-y: scroll;
}

一种替代方法是将html元素的宽度设置为100vw。在许多（如果不是大多数）浏览器上，这会抵消滚动条对宽度的影响。

html { width: 100vw; }

将高度设置为101％是我解决该问题的方法。在超过视口高度的页面和未超过视口高度的页面之间切换时，页面将不再“轻拂”。

body { 
    min-height: 101vh; 
} 

最适合我

我这样做：

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

然后，当不需要时，我不必查看难看的灰色滚动条。