使主滚动条始终可见

Question

当用户访问网页时(当页面没有足够的内容来触发滚动条的激活时),浏览器的垂直滚动条需要什么样的CSS才能显示？

Answer 1

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

这使滚动条始终可见,并且仅在需要时才激活.

更新:如果上述方法不起作用,可以使用此方法.

html {
    overflow-y:scroll;
}

Answer 2

html {
    overflow-y: scroll;
}

那是你要的吗？

遗憾的是,Opera 9.64似乎在应用于HTML或忽略了CSS声明BODY,尽管它适用于其他块级元素DIV.

Answer 3

事情在过去几年发生了变化.以上答案在任何情况下都无效.苹果正在推动各地消失的滚动条.MacO(和iOs)上的Safari,Chrome甚至Firefox只在实际滚动时显示滚动条 - 我不知道当前的Windows/IE.然而,有一些非标准方法可以在Webkit上设置滚动条的样式(IE很久以前就丢弃了).

Answer 4

确保溢出设置为"滚动"而不是"自动".话虽如此,在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);
}

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

Answer 5

html {height: 101%;}

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

这将始终在每个页面中显示ACTIVE垂直滚动条,垂直滚动条将仅可滚动几个像素.

当页面内容比浏览器的可见区域(视图端口)短时,您仍然会看到垂直滚动条处于活动状态,并且它只能滚动几个像素.

如果您通过使用此解决方案痴迷于CSS验证(我只对HTML验证感到满意),您的CSS代码也会验证W3C,因为您没有使用非标准CSS属性,例如 -moz-scrollbars-vertical

Answer 6

body { height:101%; } 将"裁剪"更大的页面.

相反,我使用:

body { min-height:101%; }

Answer 7

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

html { width: 100vw; }