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


当前回答

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

其他回答

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

html { width: 100vw; }

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

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

我是这样做的:

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

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

身体{身高:101%;}将“裁剪”较大的页面。

相反,我使用:

body { min-height:101%; }
html { height:initial!important; }

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