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


当前回答

确保溢出设置为“滚动”而不是“自动”。也就是说,在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);
}

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

其他回答

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

html {height: 101%;}

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

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

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

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

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

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

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

html {
    overflow-y:scroll;
}

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

body { 
    min-height: 101vh; 
} 

这对我来说是最好的