当用户访问网页时(当页面没有足够的内容来触发滚动条的激活),需要什么CSS来使浏览器的垂直滚动条保持可见?
当前回答
在过去的几年里,情况发生了变化。以上答案不再适用于所有情况。苹果正在到处推广消失滚动条。Safari, Chrome甚至是MacOs(和iOs)上的Firefox在实际滚动时只显示滚动条-我不知道当前的Windows/IE。然而,Webkit上有一些非标准的方法来设置滚动条的样式(IE很久以前就放弃了)。
其他回答
html {
overflow-y: scroll;
}
这是你想要的吗?
不幸的是,当应用于HTML或BODY时,Opera 9.64似乎忽略了CSS声明,尽管它适用于其他块级元素,如DIV。
我是这样做的:
html {
margin-left: calc(100vw - 100%);
margin-right: 0;
}
这样,我就不必在不需要滚动条时查看丑陋的灰色滚动条了。
确保溢出设置为“滚动”而不是“自动”。也就是说,在OS X 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);
}
如果不喜欢默认设置,可以相应地设置样式。
我可以通过将它添加到body标签来让它工作。对我来说更好,因为html元素上没有任何东西。
body {
overflow-y: scroll;
}
html {
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
这使得滚动条始终可见,只在需要时才活动。
更新:如果以上不工作,那么只是使用这个可能。
html {
overflow-y:scroll;
}