使滚动条不占用空间/防止布局偏移

Question

我正在用 html 制作一个应用程序，并且需要有一个滚动条。但是每当我添加一个时，它都会转移所有内容以腾出滚动条所需的必要空间。这搞砸了应用程序的布局。

所以我需要一种方法让滚动条简单地覆盖在页面顶部，这意味着页面仍然在它后面。我已经知道如何设置滚动条的样式以使背面透明，我只需要滚动条不占用任何空间即可。

提前致谢！

原文由 Porter Morgan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果不使用阴暗的技巧，就无法使滚动条出现 _在您的内容之上_，而且无论如何这都不是最好的主意，因为它会影响您应用程序的可用性。如果滚动条超过内容，它可能会隐藏链接/文本/等。

理想情况下，您的页面的样式应该能够适应不同的浏览器/页面宽度而不会中断。特别是只有一个小滚动条。

无论如何，这是一个可能有帮助的解决方法：

 html {
    overflow-y: scroll;
}

添加此样式将确保滚动条轨道始终存在，并且还有助于避免滚动条出现/消失时出现“跳跃”页面。同样，真正的解决方案是使用灵活的布局。

作为旁注，通常不推荐设置滚动条的样式。它不能跨浏览器工作，通常会被完全忽略。

原文由 Wesley Murch 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

更新 - overlay 仅适用于 webkit，现已弃用。

---

您可以使用 overflow overlay 属性代替 scroll ：

 html {
    overflow-y: overlay;
}

原文由 Sos Sargsyan 发布，翻译遵循 CC BY-SA 4.0 许可协议