使主滚动条始终可见

当用户访问网页时(当页面没有足够的内容来触发滚动条的激活)，需要什么CSS来使浏览器的垂直滚动条保持可见?

338967 次浏览
小开 
html {
overflow-y: scroll;
}

这是你想要的吗?

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

小开
最佳答案 
html {
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}

这使得滚动条始终可见，只在需要时才活动。

更新:如果上面不工作，那么只是使用这个可能。

html {
overflow-y:scroll;
}
小开 
html {height: 101%;}

我使用这个跨浏览器解决方案 (注意:我总是在第一行使用DOCTYPE声明，我不知道它是否在quirkmode中工作，从未测试过它)。

这将总是显示一个活动的垂直滚动条在每一页，垂直滚动条将是可滚动的只有几个像素。

当页面内容是更短的比浏览器的可见区域(查看端口)，你仍然会看到垂直滚动条活动，它将是可滚动的只有几个像素。

如果你痴迷于CSS验证(我只痴迷于HTML验证)，通过使用这个解决方案，你的CSS代码也会验证W3C，因为你没有使用像-moz-scrollbars-vertical这样的非标准CSS属性

小开
将高度设置为101%是我解决问题的方法。 当你的页面在超过视口高度和不超过视口高度的页面之间切换时，你的页面将不再“轻弹”
小开

我可以通过将它添加到body标签来让它工作。对我来说更好，因为html元素上没有任何东西。

body {
overflow-y: scroll;
}
小开

在过去的几年里，情况发生了变化。以上答案不再适用于所有情况。苹果正在到处推行滚动条消失。Safari, Chrome甚至是MacOs(和iOs)上的Firefox在实际滚动时只显示滚动条-我不知道当前的Windows/IE。然而，在Webkit上有非标准的方法来设置滚动条的样式(IE很久以前就放弃了)。

小开

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

html { width: 100vw; }
小开

确保溢出设置为“滚动”而不是“自动”。话虽如此，在OS X Lion中，溢出设置为“滚动”的行为更像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);
}

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

小开

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

相反，我使用:

body { min-height:101%; }
小开 
body {
min-height: 101vh;
}

这对我来说是最好的

小开

我是这样做的:

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

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

小开 
html { height:initial!important; }

你可能不需要!important -这取决于使用的是什么CSS。


提交答案