twitter-bootstrap 由于滚动条防止重新布局
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19208826/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Preventing relayout due to scrollbar
提问by Dionysian
How can I prevent the body of the page being "pushed" to the left when a scrollbar appears due to ajax content? I can of course set overflow:scroll to the body, but it wouldn't look nice.
当由于 ajax 内容出现滚动条时，如何防止页面主体被“推”到左侧？我当然可以设置溢出：滚动到正文，但它看起来不太好。
I am using bootstrap, but I guess it is a general question.
我正在使用引导程序，但我想这是一个普遍的问题。
采纳答案by avrahamcool
You can create a container that have a fixed width, and give the content the same width (same static width - not 100%).
that way, when the content overflows the parent, the scroll will not push the content but will flow above it.
您可以创建一个具有固定宽度的容器，并为内容提供相同的宽度（相同的静态宽度 - 而不是100%）。这样，当内容溢出父级时，滚动不会推动内容，而是会在其上方流动。
using that, you can apply a cool way to scroll without pushing anything. by showing the scroll only when you hover the container.
使用它，您可以应用一种很酷的方式来滚动而不推任何东西。通过仅在您悬停容器时显示滚动。
Check out this simple Demo
看看这个简单的演示
EDIT: HereI show the difference between setting static width, and %.
编辑： 在这里我展示了设置静态宽度和 % 之间的区别。
回答by koningdavid
Well, the scrollbar will always push your content aside, there is really nothing you can do about that. What you can do is to always show to scrollbar for example:
好吧，滚动条总是会将您的内容推到一边，对此您真的无能为力。您可以做的是始终显示滚动条，例如：
html,body {
height:101%;
}
or
或者
html {
overflow-y: scroll;
}
回答by binaryfunt
overflow: overlay
overflow: overlay
Building on avrahamcool's answer, you can use the property overflow: overlay.
基于avrahamcool 的回答，您可以使用该属性overflow: overlay。
Behaves the same as
auto, but with the scrollbars drawn on top of content instead of taking up space. Only supported in WebKit-based (e.g., Safari) and Blink-based (e.g., Chrome or Opera) browsers.
行为与 相同
auto，但滚动条绘制在内容顶部而不是占用空间。仅在基于 WebKit（例如 Safari）和基于 Blink（例如，Chrome 或 Opera）的浏览器中受支持。
Source: MDN
来源：MDN
This is great for when you need horizontally-scrolling content and don't want it to change size when scrollbars appear on hover. However, it's marked on MDN as deprecated, so future support is uncertain.
当您需要水平滚动内容并且不希望它在悬停时出现滚动条时更改大小时，这非常有用。但是，它在 MDN 上被标记为已弃用，因此未来的支持不确定。
Demo: jsfiddle.net/NKJRZ/385/
回答by Rahul Dudhane
The best way to do this is assign value 'overlay' to overflow property. This works fine.
最好的方法是为溢出属性分配值 'overlay'。这工作正常。
overflow-y: overlay;
回答by Osama Ahmaro
In my case, I was getting an annoying pop event on my navbar whenever the scrollbar appears, but applying position fixed on my nav solved it for me.
就我而言，每当滚动条出现时，我的导航栏上都会出现一个烦人的弹出事件，但是应用固定在我的导航上的位置为我解决了这个问题。
