Question

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

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

Answer 1

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

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

查看这个简单的Demo

编辑： Here我展示了设置静态宽度和％。

之间的区别

Answer 2

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

html,body {
    height:101%;
}

或

html {
    overflow-y: scroll;
}

Answer 3

以avrahamcool's answer为基础，可以使用属性overflow: overlay。

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

来源：MDN

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

Answer 4

执行此操作的最佳方法是将值“ overlay”分配给溢出属性。效果很好。

    overflow-y: overlay;

Answer 5

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