overflow: overlay

在avrahamcool's answer上构建，可以使用属性overflow: overlay。
行为与auto相同，但滚动条绘制在内容顶部，而不是占用空间。仅支持基于WebKit（例如Safari）和基于Blink（例如Chrome或Opera）的浏览器。
资料来源：MDN
当你需要水平滚动的内容，并且不希望滚动条在悬停时改变大小时，这是非常好的。

**警告：**已弃用。支持几乎仅限于Chromium，但未来可能会消失。参见https://caniuse.com/css-overflow-overlay。

但是，您可以执行auto的回退：

.container:hover {
    overflow: auto; /* fallback */
    overflow: overlay;
}

演示：jsfiddle.net/NKJRZ/385/
Can I Use还有一个有趣的注解：
此值已弃用，相关功能已标准化为the scrollbar-gutter property。
但是，您应该检查他们的链接，因为截至2021年11月，浏览器对该实验性功能的支持并不比overflow: overlay更好。

您可以创建一个具有固定宽度的容器，并为内容提供相同的宽度（相同的静态宽度-而不是100%）。这样，当内容溢出父内容时，滚动将不推动内容，而是在其上方流动。
使用它，你可以应用一种很酷的方式来滚动，而不需要推动任何东西。通过仅在悬停容器时显示滚动条。
看看这个简单的Demo
编辑：Here我显示了设置静态宽度和%之间的差异。

好吧，滚动条总是会把你的内容推到一边，你对此真的无能为力。你可以做的是总是显示到滚动条，例如：

html,body {
    height:101%;
}

或者是

html {
    overflow-y: scroll;
}

最好的方法是给overflow属性赋值“overlay”。这个很好用。

overflow-y: overlay;

在我的例子中，每当滚动条出现时，我的导航栏上就会出现一个恼人的弹出事件，但在我的导航上应用固定位置为我解决了这个问题。

在2023年有一个scrollbar-gutter属性。scrollbar-gutter: stable;就可以了。支持除Opera以外的所有浏览器。