当用户访问网页时(当页面没有足够的内容来触发滚动条的激活),需要什么CSS来使浏览器的垂直滚动条保持可见?
当前回答
html {height: 101%;}
我使用这个跨浏览器解决方案(注意:我总是在第一行使用DOCTYPE声明,我不知道它在quirksmode中是否有效,从未测试过)。
这将始终显示一个活跃的垂直滚动条在每一页,垂直滚动条将是可滚动的只有几个像素。
当页面内容短于浏览器的可见区域(视图端口),你仍然会看到垂直滚动条活动,它将是可滚动的只有几个像素。
如果你痴迷于CSS验证(我只痴迷于HTML验证),通过使用这个解决方案,你的CSS代码也将验证W3C,因为你没有使用非标准的CSS属性,如-moz-scrollbars-vertical
其他回答
我可以通过将它添加到body标签来让它工作。对我来说更好,因为html元素上没有任何东西。
body {
overflow-y: scroll;
}
身体{身高:101%;}将“裁剪”较大的页面。
相反,我使用:
body { min-height:101%; }
另一种方法是将html元素的宽度设置为100vw。在许多(如果不是大多数)浏览器上,这抵消了滚动条对宽度的影响。
html { width: 100vw; }
html {
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
这使得滚动条始终可见,只在需要时才活动。
更新:如果以上不工作,那么只是使用这个可能。
html {
overflow-y:scroll;
}
把高度设置为101%是我解决这个问题的办法。 当你的页面在超过视口高度和不超过视口高度的页面之间切换时,你的页面将不再“轻弹”。