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或BODY时似乎忽略了CSS声明，尽管它适用于DIV等其他块级元素。

Answer 3

过去几年情况发生了变化。以上答案在任何情况下都无效。 Apple正在推动disappearing scrollbars无处不在。 MacO（和iOs）上的Safari，Chrome甚至Firefox只在实际滚动时显示滚动条 - 我不了解当前的Windows / IE。然而，有一些非标准的方法可以在Webkit上设置样式scroll bars（IE很久以前就丢弃了它）。

Answer 4

确保溢出设置为＆＃34;滚动＆＃34;不是＆＃34; auto。＆＃34; 用那个说，在OS X Lion中，溢出设置为＆＃34;滚动＆＃34;表现更像汽车，因为滚动条仍然只会在使用时显示。因此，如果上述任何解决方案似乎都不起作用，那可能就是原因。

这是您需要解决的问题：

::-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

body { height:101%; }将“裁剪”较大的网页。

相反，我使用：

body { min-height:101%; }

Answer 6

html {height: 101%;}

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

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

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

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

Answer 7

我可以通过将其添加到body标签来实现此功能。对我来说更好，因为我在html元素上没有任何内容。

body {
    overflow-y: scroll;
}

Answer 8

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

html { width: 100vw; }

Answer 9

将高度设置为101％是我解决问题的方法。当在超出视口高度的页面和不高于视口高度的页面之间切换时，页面将不再“轻弹”。

Answer 10

将此代码添加到CSS样式表中：

foo(menuOptions)
foo(menuOptions as! [Printable])

这就是它的全部！

Answer 11

body { 
    min-height: 101vh; 
}

最适合我

Answer 12

我这样做：

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

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

Answer 13

html { height:initial!important; }

您可能不需要 !important - 取决于现有的 CSS。

使主滚动条始终可见

13 个答案: