css - 防止由于滚动条而重新布局

Question

当由于ajax内容出现滚动条时，如何防止页面主体被“推”到左侧？我当然可以设置溢出：滚动到正文，但它看起来不太好。

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

score 20 · Accepted Answer

基于avrahamcool 的回答，您可以使用该属性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 还有一个有趣的注释：

该值已被弃用，相关功能被标准化为scrollbar-gutter属性。

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

score 14 · Accepted Answer

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

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

看看这个简单的演示

编辑：这里我展示了设置静态宽度和 % 之间的区别。

score 7 · Accepted Answer

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

html,body {
    height:101%;
}

或者

html {
    overflow-y: scroll;
}

score 6 · Accepted Answer

最好的方法是将值“覆盖”分配给溢出属性。这工作正常。

    overflow-y: overlay;

score 0 · Accepted Answer

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

5 回答 5