Html 防止滚动条增加到 Chrome 上的页面宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18548465/
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
Prevent scroll-bar from adding-up to the Width of page on Chrome
提问by Acemad
I have a small issue trying to keep my .html pages at a consistent width on Chrome, For example I have a page (1) with lots of contents that overflows the viewport's (right word?) height, so there's a vertical scroll-bar on that page (1). On page (2) i have the same layout (menus, divs,...etc) but less content, so no vertical scroll-bars in there.
我有一个小问题，试图让我的 .html 页面在 Chrome 上保持一致的宽度，例如，我有一个页面 (1)，其中有很多内容超出了视口的（正确的词？）高度，所以有一个垂直滚动条在该页 (1) 上。在第 (2) 页上，我有相同的布局（菜单、div 等）但内容较少，因此那里没有垂直滚动条。
The problem is that on page (1) the scroll-bars seem to push elements slightly to the left (adding-up to the width?) while everything appears well centered on page (2)
问题是在页面 (1) 上，滚动条似乎将元素稍微向左推（增加了宽度？），而所有内容都显示在页面 (2) 的中心
I'm still a beginner on HTML/CSS/JS, and I'm fairly convinced that this isn't so difficult, but i had no luck figuring out the solution. It does work as intended on IE10, and FireFox (non-interfering scroll-bars), I only encountered this on Chrome.
我仍然是 HTML/CSS/JS 的初学者，我相当确信这并不是那么困难，但我没有找到解决方案的运气。它确实在 IE10 和 FireFox（无干扰滚动条）上按预期工作，我只在 Chrome 上遇到过这种情况。
采纳答案by Lwyrn
You can get the scrollbar size and then apply a margin to the container.
您可以获取滚动条大小，然后对容器应用边距。
Something like this:
像这样的东西：
var checkScrollBars = function(){
var b = $('body');
var normalw = 0;
var scrollw = 0;
if(b.prop('scrollHeight')>b.height()){
normalw = window.innerWidth;
scrollw = normalw - b.width();
$('#container').css({marginRight:'-'+scrollw+'px'});
}
}
CSS for remove the h-scrollbar:
用于删除 h 滚动条的 CSS：
body{
overflow-x:hidden;
}
Try to take a look at this: http://jsfiddle.net/NQAzt/
试着看看这个：http: //jsfiddle.net/NQAzt/
回答by simonDos
DISCLAIMER: overlayhas been deprecated.
You can still use this if you absolutely have to, but try not to.
免责声明：overlay已被弃用。
如果您绝对需要，您仍然可以使用它，但尽量不要使用。
This only works on WebKit browsers, but I like it a lot.
Will behave like autoon other browsers.
这仅适用于 WebKit 浏览器，但我非常喜欢它。将表现得像auto在其他浏览器上一样。
.yourContent{
overflow-y: overlay;
}
This will make the scrollbar appear only as an overlay, thus not affecting the widthof your element!
这将使滚动条仅显示为叠加层，从而不会影响元素的宽度！
回答by Hive7
All you need to do is add:
您需要做的就是添加：
html {
overflow-y: scroll;
}
In your css file as this will have the scroller whether it is needed or not though you just won't be able to scroll
在您的 css 文件中，因为无论是否需要，都会有滚动条，尽管您将无法滚动
This means that the viewport will have the same width for both
这意味着视口将具有相同的宽度
回答by Neurotransmitter
Probably
大概
html {
width: 100vw;
}
is just what you want.
正是你想要的。
回答by Kyle Dumovic
Webkit browsers like Safari and Chrome subtract the scroll bar width from the visible page width when calculating width: 100% or 100vw. More at DM Rutherford's Scrolling and Page Width.
Safari 和 Chrome 等 Webkit 浏览器在计算宽度时会从可见页面宽度中减去滚动条宽度：100% 或 100vw。更多在DM Rutherford 的滚动和页面宽度。
Try using overflow-y: overlayinstead.
尝试使用overflow-y: overlay。
回答by fuzzy_logic_77
I found I could add
我发现我可以添加
::-webkit-scrollbar {
display: none;
}
directly to my css and it would make the scrollbar invisible, but still allow me to scroll (on Chrome at least). Good for when you don't want a distracting scrollbar on your page!
直接到我的 css，它会使滚动条不可见，但仍然允许我滚动（至少在 Chrome 上）。当您不希望页面上有分散注意力的滚动条时非常适合！
回答by Hashbrown
It doesn't seem my other answer is working quite right at the moment (but I'll continue to try to get it operational).
目前我的其他答案似乎不太正确（但我会继续尝试使其运行）。
But basically what you'll need to do, and what it was trying to do dynamically, is set the contents' width to slightly less than that of the parent, scrollable pane.
So that when the scrollbar appears it has no affect on the content.
但基本上你需要做的，以及它试图动态做的，是将内容的宽度设置为略小于父级可滚动窗格的宽度。
这样当滚动条出现时它对内容没有影响。
This EXAMPLEshows a more hacky way of attaining that goal, by hardcoding widths instead of trying to get the browser to do it for us via padding.
If this is feasible this is the most simplest solution if you don't want a permanent scrollbar.
这个例子展示了一种更hacky的方式来实现这个目标，通过硬编码widths 而不是试图让浏览器通过padding.
如果这是可行的，如果您不想要永久滚动条，这是最简单的解决方案。
回答by Robbendebiene
For containers with a fixed width a pure CSS cross browser solutioncan be accomplished by wrapping the container into another div and applying the same width to both divs.
对于具有固定宽度的容器，可以通过将容器包装到另一个 div 并将相同的宽度应用于两个 div 来实现纯 CSS 跨浏览器解决方案。
#outer {
overflow-y: auto;
overflow-x: hidden;
/*
* width must be an absolute value otherwise the inner divs width must be set via
* javascript to the computed width of the parent container
*/
width: 200px;
}
#inner {
width: inherit;
}
回答by Hashbrown
EDIT:this answer isn't quite right at the moment, refer to my other answer to see what I was attempting to do here. I'm trying to fix it up, but if you can offer assistance do so in the comments, thanks!
编辑：这个答案目前不太正确，请参阅我的其他答案以了解我在这里尝试做什么。我正在尝试修复它，但如果您能提供帮助，请在评论中提供帮助，谢谢！
Using padding-rightwill mitigate the sudden appearance of a scrollbar
使用padding-right将减轻滚动条的突然出现
As you can see from the dots, the text makes it to the same point in the page before wrapping, regardless of whether or not a scrollbar is present.
This is because when a scrollbar is introduced the padding hides behind it, so the scrollbar doesn't push on the text!
从这些点可以看出，无论是否存在滚动条，文本都会在换行前到达页面中的同一点。
这是因为当引入滚动条时，填充隐藏在它后面，所以滚动条不会推动文本！
回答by Piotr Siatkowski
.modal-dialog {
position: absolute;
left: calc(50vw - 300px);
}
where 300 px is a half of my dialog window width.
其中 300 px 是我的对话框窗口宽度的一半。
This is actually the only thing that worked for me.
这实际上是唯一对我有用的东西。
