防止滚动条导致重新布局

Question

当由于ajax内容而出现滚动条时,如何防止页面正文被"推"到左侧？我当然可以设置溢出:滚动到正文,但它看起来不太好看.

我正在使用bootstrap,但我想这是一个普遍的问题.

Answer 1

overflow: overlay

基于avrahamcool 的回答，您可以使用该属性overflow: overlay。

行为与 相同auto，但滚动条绘制在内容顶部而不是占用空间。仅支持基于 WebKit（例如 Safari）和基于 Blink（例如 Chrome 或 Opera）的浏览器。

来源：MDN

当您需要水平滚动内容并且不希望滚动条出现在悬停时更改大小时，这非常有用。但是，它在 MDN 上标记为已弃用，因此未来的支持不确定。

演示：jsfiddle.net/NKJRZ/385/

Answer 2

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

使用它,您可以应用一种很酷的方式滚动而不会推动任何东西.通过仅在悬停容器时显示滚动.

看看这个简单的演示

编辑: 这里我显示设置静态宽度和%之间的区别.

Answer 3

好吧,滚动条总会将你的内容推到一边,你真的无能为力.你可以做的是总是显示滚动条例如:

html,body {
    height:101%;
}

要么

html {
    overflow-y: scroll;
}

Answer 4

最好的方法是为溢出属性赋值“overlay”。这工作正常。

    overflow-y: overlay;