在用户访问网页时（当页面内容不足以触发滚动条激活时），需要哪些CSS才能使浏览器的垂直滚动条保持可见？
12个回答
383
html {
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
这将使滚动条始终可见，并且仅在需要时才处于活动状态。
更新：如果上述方法不起作用，那么只使用这个可能会奏效。
html {
overflow-y:scroll;
}
- Corv1nus
15
3你知道哪个版本的FF开始支持
overflow-y吗？因为似乎-moz-scrollbars-vertical已经被弃用，推荐使用overflow-y属性。 - Ionuț G. Stan2当网站某些页面太小而无法显示滚动条，而其他页面可以时，有没有“页面跳转”的替代方法？还是这是最佳实践？我必须承认，在网络上我看到的大多数页面都占据了整个页面。 - Jess
3我不确定这是否是最佳实践，但在所有页面上都有滚动条，并且仅在必要时激活，以避免页面跳动通常是可接受的解决方案。我倾向于始终保持滚动条而非跳动。 - Corv1nus
我更新了它。-moz-scrollbars-vertical在Chrome中对我无效，但是overflow-y：scroll有效。五年时间会带来很多变化。 - Corv1nus
2对于那些（像我一样）觉得样式化
html 有点 hack-y 的人，请注意您可以使用结构伪选择器 :root 来代替 html。请参见：https://developer.mozilla.org/en-US/docs/Web/CSS/:root - Rounin显示剩余10条评论
63
请确保overflow属性设置为"scroll"而非"auto"。话虽如此，在OS X Lion中，设置为"scroll"的overflow属性的行为更像是"auto"，即只有在使用滚动条时才会显示。所以，如果上述解决方案似乎没有起作用，那可能是原因所在。
以下是需要修复它的内容：
::-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);
}
如果您不喜欢默认样式，可以相应地进行样式设置。
- molls223
5
4可以的，您需要让它仅在特定的 div 上工作，该怎么做呢？ - Rich
3@Rich 就像任何其他的 CSS 元素一样。.yourdiv::-webkit-scrollbar {...} - Kris
@Kris 你好，感谢你的回答，这里是它的示例。https://dev59.com/k7Hma4cB1Zd3GeqPRNDa#54667091 - Rich
2为什么要使用
-webkit-appearance: none;？ - Suraj Jain这是唯一有效的方法。无处不在的
overflow-y:scroll; 是无效的。 - Mote Zart35
在过去的几年里，情况已经发生了变化。上面的答案已经不再适用于所有情况。苹果正在推广到处都有的隐藏滚动条 （disappearing scrollbars）。在MacOS（和iOS）上，Safari、Chrome 甚至是Firefox只有在实际滚动时才显示滚动条——我不知道当前 Windows/IE 的情况。然而，在Webkit中有非标准的方法来样式化滚动条 (IE 已经很久以前放弃了这种方法)。
- Frank Lämmer
3
但它是否能够在那些新设备上优雅地降级？ - Ben
3谢谢您提出关于滚动条消失的重要观点。对我来说，保持滚动条可见的原因是为了避免当内容由需要滚动变成不需要滚动时发生微小但非常明显和非常烦人的抖动。有了消失的滚动条，它们在显示和隐藏时不会使页面抖动，所以对我来说是可以接受的。但还是感谢您提出这个重要观点。 - Noitidart
10从用户体验的角度来看，大多数情况下我们希望滚动条是可见的。根据当前的趋势，如果滚动条不可见，则需要额外的步骤才能“尝试”更多的列表项。如果人们看到滚动条，则不需要额外的视觉提示表明下拉菜单或列表中还有更多的项目。 - windsurf88
28
html {
overflow-y: scroll;
}
这是你想要的吗？
不幸的是，Opera 9.64似乎忽略了应用于HTML或BODY时的CSS声明，尽管它适用于其他块级元素如DIV。
- Ionuț G. Stan
15
body { height:101%; }会“裁剪”更大的页面。
相反，我使用：
body { min-height:101%; }
- Scott
2
1这个问题是5年前提出的，已经有一个被接受的答案了。你的回答并没有比已经被接受的答案更好。 - Dipen Shah
27这份答案实际上提供了其他答案没有提供的额外信息。 - GaTechThomas
14
html {height: 101%;}
我使用这个跨浏览器的解决方案(注意：我总是在第一行使用DOCTYPE声明，我不知道它是否适用于怪异模式，从未测试过)。
这将始终显示一个活动的垂直滚动条，垂直滚动条只能滚动几个像素。
当页面内容较短时，仍然会看到垂直滚动条处于激活状态，并且它只能滚动几个像素。
如果您追求CSS验证（我只追求HTML验证），通过使用此解决方案，您的CSS代码也将符合W3C标准，因为您没有使用非标准的CSS属性，如-moz-scrollbars-vertical。
- Marco Demaio
2
1优雅的解决方案 - Artur Keyan
1不是一个优雅的解决方案，仅让它可以滚动几个像素是很烦人的。 - reddtoric
5
另一种方法是将html元素的宽度设置为100vw。在许多浏览器上，这可以抵消滚动条对宽度的影响。
html { width: 100vw; }
- lunelson
3
我能通过将其添加到body标签来使其工作。对我而言更好，因为我没有在html元素上添加任何内容。
body {
overflow-y: scroll;
}
- Jazzepi
0
html { height:initial!important; }
您可能不需要!important——这取决于已有的CSS。
- Edmunds22
0
body {
min-height: 101vh;
}
这对我来说效果最佳
- Lolo
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接