Html 如何防止滚动条重新定位网页？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1417934/
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
How to prevent scrollbar from repositioning web page?
提问by Dmitri Nesteruk
I have a website with center-aligned DIV. Now, some pages need scrolling, some don't. When I move from one type to another, the appearance of a scrollbar moves the page a few pixels to the side. Is there any way to avoid this without explicitly showing the scrollbars on each page?
我有一个中心对齐 DIV 的网站。现在，有些页面需要滚动，有些则不需要。当我从一种类型移动到另一种类型时，滚动条的外观会将页面向一侧移动几个像素。有没有办法避免这种情况，而无需在每个页面上明确显示滚动条？
回答by Ruben
overflow-y:scroll is correct, but you should use it with the html tag, not body or else you get a double scrollbar in IE 7
So the correct css would be:
overflow-y:scroll 是正确的，但你应该将它与 html 标签一起使用，而不是 body 否则你会在 IE 7 中得到一个双滚动条
所以正确的 css 应该是：
html {
overflow-y: scroll;
}
回答by Rapti
Wrap the content of your scrollable element into a div and apply padding-left: calc(100vw - 100%);.
将可滚动元素的内容包装到 div 中并应用padding-left: calc(100vw - 100%);。
<body>
<div style="padding-left: calc(100vw - 100%);">
Some Content that is higher than the user's screen
</div>
</body>
The trick is that 100vwrepresents 100% of the viewport including the scrollbar. If you subtract 100%, which is the available space without the scrollbar, you end up with the width of the scrollbar or 0if it is not present. Creating a padding of that width on the left will simulate a second scrollbar, shifting centered content back to the right.
诀窍是100vw代表 100% 的视口，包括滚动条。如果减去100%，这是没有滚动条的可用空间，则最终会得到滚动条的宽度，或者0如果它不存在。在左侧创建该宽度的填充将模拟第二个滚动条，将居中的内容移回右侧。
Please note that this will only work if the scrollable element uses the page's entire width, but this should be no problem most of the time because there are only few other cases where you have centered scrollable content.
请注意，这仅在可滚动元素使用页面的整个宽度时才有效，但这在大多数情况下应该没问题，因为只有少数其他情况下您将可滚动内容居中。
回答by Michael Krelin - hacker
I think not. But styling bodywith overflow: scrollshould do. You seem to know that, though.
我想不是。但造型body与overflow: scroll应该做。不过，你似乎知道这一点。
回答by Moesio
With scroll always being shown, maybe be not good for layout.
总是显示滚动，可能不利于布局。
Try to limit body width with css3
尝试使用 css3 限制主体宽度
body {
width: calc(100vw - 34px);
}
vwis the width of the viewport (see this linkfor some explanation) calccalculate in css3 34pxstands for double scrollbar width (see thisfor fixed or this to calculateif you don't trust fixed sizes)
vw是视口的宽度（有关某些解释，请参阅此链接）calc在 css3 中计算34px代表双滚动条宽度（请参阅此固定或此计算，如果您不信任固定大小）
回答by pongo
html {
overflow-x: hidden;
margin-right: calc(-1 * (100vw - 100%));
}
Example. Click "change min-height" button.
例子。单击“更改最小高度”按钮。
With calc(100vw - 100%)we can calculate the width of the scrollbar (and if it is not displayed, it will be 0). Idea: using negative margin-right, we can increase the width of <html>to this width. You will see a horizontal scroll bar — it should be hidden using overflow-x: hidden.
有了calc(100vw - 100%)我们可以计算滚动条的宽度（如果不显示，则为0）。想法：使用负边距-right，我们可以将宽度<html>增加到这个宽度。您将看到一个水平滚动条——它应该使用overflow-x: hidden.
回答by kunalkamble
If changing size or after loading some data it is adding the scroll bar then you can try following, create class and apply this class.
如果更改大小或在加载一些数据后添加滚动条，那么您可以尝试以下操作，创建类并应用此类。
.auto-scroll {
overflow-y: overlay;
overflow-x: overlay;
}
回答by kunalkamble
I don't know if this is an old post, but i had the same problem and if you want to scroll vertically only you should try overflow-y:scroll
我不知道这是否是旧帖子，但我遇到了同样的问题，如果您只想垂直滚动，您应该尝试 overflow-y:scroll
回答by Frank L
I've solved the issue on one of my websites by explicitly setting the width of the body in javascript by the viewport size minus the width of the scrollbar. I use a jQuery based function documented hereto determine the width of the scrollbar.
我已经在我的一个网站上解决了这个问题，方法是通过视口大小减去滚动条的宽度在 javascript 中显式设置主体的宽度。我使用此处记录的基于 jQuery 的函数来确定滚动条的宽度。
<body id="bodyid>
var bodyid = document.getElementById('bodyid');
bodyid.style.width = window.innerWidth - scrollbarWidth() + "px";
回答by Grant Gryczan
Extending off of Rapti's answer, this should work just as well, but it adds more margin to the right side of the bodyand hides it with negative htmlmargin, instead of adding extra padding that could potentially affect the page's layout. This way, nothing is changed on the actual page (in most cases), and the code is still functional.
扩展Rapti 的答案，这应该也能正常工作，但它会在 右侧添加更多边距body并用负html边距隐藏它，而不是添加可能影响页面布局的额外填充。这样，实际页面上没有任何更改（在大多数情况下），并且代码仍然有效。
html {
margin-right: calc(100% - 100vw);
}
body {
margin-right: calc(100vw - 100%);
}
回答by Hassan Tareq
@kashesandr's solutionworked for me but to hide horizontal scrollbar I added one more style for body. here is complete solution:
@kashesandr 的解决方案对我有用，但为了隐藏水平滚动条，我为 body 添加了另一种样式。这是完整的解决方案：
CSS
CSS
<style>
/* prevent layout shifting and hide horizontal scroll */
html {
width: 100vw;
}
body {
overflow-x: hidden;
}
</style>
JS
JS
$(function(){
/**
* For multiple modals.
* Enables scrolling of 1st modal when 2nd modal is closed.
*/
$('.modal').on('hidden.bs.modal', function (event) {
if ($('.modal:visible').length) {
$('body').addClass('modal-open');
}
});
});
JS Only Solution (when 2nd modal opened from 1st modal):
JS Only 解决方案（当第二个模式从第一个模式打开时）：
/**
* For multiple modals.
* Enables scrolling of 1st modal when 2nd modal is closed.
*/
$('.modal').on('hidden.bs.modal', function (event) {
if ($('.modal:visible').length) {
$('body').addClass('modal-open');
$('body').css('padding-right', 17);
}
});
