防止由于滚动条而重新布局答案

【问题标题】：Preventing relayout due to scrollbar防止由于滚动条而重新布局
【发布时间】：2013-10-06 12:26:52
【问题描述】：

当由于 ajax 内容而出现滚动条时，如何防止页面主体被“推”到左侧？我当然可以设置overflow:scroll 到body，但是看起来不太好。

我正在使用引导程序，但我想这是一个普遍的问题。

【问题讨论】：

正文内容被推送？？不清楚。更加详细一些。我不认为有一种叫做被推开的事情。可能是因为您的标记或样式。放一些东西来调试。请小提琴
页面原本没有滚动条。然后 ajax 追加更多内容并出现滚动条。为了考虑滚动条的宽度，原始主体被“推动”。我看到这发生在 chrome 和 Firefox 中。如果没有其他答案，我稍后会提琴。
我的意思是滚动条的大小是 10px。这不会对你产生太大影响。可以忽略不计的转变 ryt。如果不指定溢出，您将无法处理此问题：滚动。否则，您必须使用带有 z-index 的自定义滚动条。
How Do I Stop My Web Content From Shifting Left When The Vertical Scrollbar Appears? Roll-Up of Advice 2017的可能重复

【解决方案1】：

基于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;
}

Can I Use 还有一个有趣的注释：

此值已弃用，相关功能已标准化为 the scrollbar-gutter property。

但是，您应该查看他们的链接，因为截至 2021 年 11 月，浏览器对该实验性功能的支持并不比 overflow: overlay 好。

【讨论】：

【解决方案2】：

您可以创建一个具有固定宽度的容器，并为内容提供相同的宽度（相同的静态宽度 - 不是100%）。这样，当内容溢出父级时，滚动不会推动内容，而是会在其上方流动。

使用它，您可以应用一种很酷的方式来滚动而无需推动任何东西。仅当您将容器悬停时才显示滚动条。

看看这个简单的Demo

编辑： Here我展示了设置静态宽度和%的区别。

【讨论】：

【解决方案3】：

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

html,body {
    height:101%;
}

或

html {
    overflow-y: scroll;
}

【讨论】：

【解决方案4】：

执行此操作的最佳方法是将值“覆盖”分配给溢出属性。这很好用。

    overflow-y: overlay;

【讨论】：

【解决方案5】：

在我的情况下，每当滚动条出现时，我的导航栏上都会出现烦人的弹出事件，但应用固定在导航上的位置为我解决了这个问题。

【讨论】：