使主滚动条始终可见答案

【问题标题】：Making the main scrollbar always visible使主滚动条始终可见
【发布时间】：2010-11-15 04:52:55
【问题描述】：

当用户访问网页时（当页面没有足够的内容来触发滚动条的激活时），需要什么 CSS 才能使浏览器的垂直滚动条保持可见？

【问题讨论】：

为了防止jumping scrollbars in Windows有一个better solution。

【解决方案1】：

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

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

更新：如果上述方法不起作用，则可以使用它。

html {
    overflow-y:scroll;
}

【讨论】：

你知道什么版本的FF支持overflow-y吗？似乎 -moz-scrollbars-vertical 已被弃用，取而代之的是 overflow-y 属性。
如果我没记错的话，我认为是 Internet Explorer 6.x+、Firefox 1.5+。我一直在使用上面的代码，它适用于我的 FF1.5-3.5.1 和 IE6-8。
当您网站上的某些页面太小而没有滚动条而其他页面有滚动条时，是否有任何替代“页面跳转”的方法？或者这是“最佳实践”？我不得不承认，我在网络上看到的页面并不占一整页。
我不确定这是否是最佳做法，但是，在所有页面上都有滚动条，并且仅在必要时才处于活动状态，以避免页面跳转通常是一个可以接受的解决方案。我更喜欢持续滚动条而不是跳转。
对于那些（像我一样）发现样式 html 有点hack-y的人，请注意，您可以使用结构伪选择器 :root 而不是 @987654329 @。见：developer.mozilla.org/en-US/docs/Web/CSS/:root

【解决方案2】：

html { height:initial!important; }

您可能不需要 !important - 取决于使用的 CSS。

【讨论】：

【解决方案3】：

我这样做：

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

那我就不用在不需要的时候看丑陋的灰色滚动条了。

【讨论】：

问题要求它始终可见。

【解决方案4】：

body { 
    min-height: 101vh; 
}

最适合我

【讨论】：

【解决方案5】：

html {
    overflow-y: scroll;
}

这是你想要的吗？

不幸的是，Opera 9.64 在应用于HTML 或BODY 时似乎忽略了该CSS 声明，尽管它适用于DIV 等其他块级元素。

【讨论】：

【解决方案6】：

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

相反，我使用：

body { min-height:101%; }

【讨论】：

这个问题是 5 年前提出的，它已经有一个公认的答案。您的答案没有提供比已经接受的答案更好的答案。
这个答案确实提供了其他答案中没有提供的额外信息。

【解决方案7】：

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

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

【讨论】：

这东西行得通！但是你怎么能只在一个特定的 div 上做呢？
@Rich 就像任何其他 css 元素一样。 .yourdiv::-webkit-scrollbar {...}
@Kris 嗨，谢谢你的回答，这里是它的例子。 stackoverflow.com/a/54667091/2637261
为什么用这个-webkit-appearance: none;

【解决方案8】：

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

html { width: 100vw; }

【讨论】：

【解决方案9】：

过去几年情况发生了变化。上述答案不再适用于所有情况。苹果正在到处推disappearing scrollbars。 MacOs（和 iOs）上的 Safari、Chrome 甚至 Firefox 仅在实际滚动时显示滚动条——我不知道当前的 Windows/IE。然而，在 Webkit 上设置 scroll bars 的样式有一些非标准的方式（IE 很久以前就放弃了）。

【讨论】：

但它会在那些新的上优雅地降级？
感谢您在消失的滚动条上提供的这一点。对我来说，保持滚动条可见的原因是为了避免随着内容从滚动变为不滚动而出现轻微但非常明显且非常烦人的混蛋。随着滚动条的消失，它们在显示和隐藏时不会晃动身体，所以对我来说没问题。但是感谢您提出的这一点。
从用户体验的角度来看，大多数时候我们希望滚动条可见。根据当前趋势，如果滚动条不可见，则必须“尝试”一个可见列表以获取列表中的更多内容。如果人们看到滚动条，则不需要额外的视觉线索表明下拉列表或列表中有更多项目。

【解决方案10】：

我可以通过将它添加到 body 标记来使其工作。对我来说更好，因为我在 html 元素上没有任何东西。

body {
    overflow-y: scroll;
}

【讨论】：

【解决方案11】：

html {height: 101%;}

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

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

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

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

【讨论】：

优雅的解决方案

【解决方案12】：

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

【讨论】：