关于html：使主滚动条始终可见


Making the main scrollbar always visible

当用户访问网页时(页面内容不足以触发滚动条激活时)，使浏览器垂直滚动条保持可见状态需要什么CSS？

相关讨论

1
2
3
4
html {
    overflow: -moz-scrollbars-vertical;
    overflow-y: scroll;
}

这使滚动条始终可见，并且仅在需要时才处于活动状态。

更新：如果上述方法不起作用，则可能只是使用此方法。

1
2
3
html {
    overflow-y:scroll;
}
相关讨论

确保将溢出设置为" scroll "而不是" auto。"也就是说，在OS X Lion中，将溢出设置为" scroll "的行为更像是auto，因为滚动条仍仅在正在使用。因此，如果上述任何解决方案似乎都不起作用，这可能就是原因。

这是您需要解决的问题：

1
2
3
4
5
6
7
8
9
::-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);
}

您不喜欢默认值。

相关讨论

最近几年，情况发生了变化。以上答案在所有情况下都不再有效。苹果正在各地推销消失的滚动条。 MacO(和iO)上的Safari，Chrome甚至Firefox在实际滚动时仅显示滚动条，"我不了解当前的Windows / IE。但是，在Webkit上有一些非标准的样式来设置滚动条的样式(很久以前IE即已删除)。

相关讨论

不幸的是，Opera 9.64在应用于HTML或BODY时似乎忽略了CSS声明，尽管它适用于DIV。

1
html {height: 101%;}

我使用此跨浏览器解决方案(注意：我始终在第一行中使用DOCTYPE声明，我不知道它是否在quirksmode下工作，从未测试过)。

这将始终显示在每个页面中都有一个活动的垂直滚动条，垂直滚动条将只能滚动几个像素。

当页面内容短于浏览器的可见区域(查看端口)时，您仍将看到垂直滚动条，它将只能滚动几个像素。

如果使用此解决方案使您沉迷于CSS验证(我仅对HTML验证有所了解)，则您的CSS代码也将针对W3C进行验证，因为您未使用非标准CSS属性，例如-moz-scrollbars-vertical

相关讨论

body { height:101%; }将\\\\"裁剪\\\\"大页面。

我使用：

1
body { min-height:101%; }
相关讨论

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

1
html { width: 100vw; }

我可以通过将其添加到body标签来使其正常工作。对我来说更好，因为html元素上没有任何内容。

1
2
3
body {
    overflow-y: scroll;
}

我这样做：

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

然后，当不需要时，我不必查看灰色的滚动条。

相关讨论

1
2
3
body {
    min-height: 101vh;
}

最适合我

将高度设置为101％是我解决此问题的方法。在超过视口高度的页面和未超过视口高度的页面之间切换时，您的页面将不再"轻拂"。