Html 滚动条调整页面大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10562938/
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
Scrollbar resizing the page
提问by G4bri3l
Let's say I have a static webpage and the whole page is wrapped, let's say inside a width of 700px, now if the content of the page is too long then (obviously) a scrollbar appears. BUT the appearance of the scrollbar moves everything to the left of like a few pixels (the ones needed to fit the scrollbar on the right side of the page). What I'd like to do is to remove this "moving" effect, so that if a scrollbar is needed this doesn't affect the content of the page in any way.
假设我有一个静态网页并且整个页面都被包裹了，假设在 700px 的宽度内，现在如果页面的内容太长那么（显然）会出现一个滚动条。但是滚动条的外观将所有内容都向左移动了几个像素（这些像素需要适合页面右侧的滚动条）。我想要做的是删除这种“移动”效果，这样如果需要滚动条，这不会以任何方式影响页面的内容。
I don't know if I made myself clear.
不知道有没有说清楚。
let's say that this is a webpage:
假设这是一个网页：
| .........contentcontent ........ |
| .........contentcontent ........ |
| .........contentcontent ........ |
| .........contentcontent ........ |
| .........contentcontent ........ |
| .........contentcontent ........ |
| .........contentcontent ........ |
| ……内容内容………… |
| ……内容内容………… |
| ……内容内容………… |
| ……内容内容………… |
| ……内容内容………… |
| ……内容内容………… |
| ……内容内容………… |
and this is how it looks with the scrollbar:
这是滚动条的外观：
| .....contentcontent .......... | |
| .....contentcontent .......... | |
| .....contentcontent .......... | |
| .....contentcontent .......... | |
|......contentcontent .......... | |
| .....contentcontent .......... | |
| .....contentcontent .......... | |
| .....contentcontent .... | |
| .....contentcontent .... | |
| .....contentcontent .... | |
| .....contentcontent .... | |
|......内容内容....... | |
| .....contentcontent .... | |
| .....contentcontent .... | |
but I'd like to have something like this:
但我想要这样的东西：
| .........contentcontent ...... | |
| .........contentcontent ...... | |
| .........contentcontent ...... | |
| .........contentcontent ...... | |
| .........contentcontent ...... | |
| .........contentcontent ...... | |
| .........contentcontent ...... | |
| ......内容内容...... | |
| ......内容内容...... | |
| ......内容内容...... | |
| ......内容内容...... | |
| ......内容内容...... | |
| ......内容内容...... | |
| ......内容内容...... | |
dots represent whitespace, content represent the webpage content and the column on the right represents the scrollbar.
点代表空白，content代表网页内容，右边的列代表滚动条。
采纳答案by Johannes Lumpe
You can set overflow-y: scrollas rule for your body. This will always display a vertical scrollbar which is disabled unless the content is long enough to be scrolled. This way the content won't shift to the left when its long enough that you can actually scroll and no scripting is needed to make this work.
你可以overflow-y: scroll为你的身体设定规则。这将始终显示禁用的垂直滚动条，除非内容足够长可以滚动。这样，当内容足够长以至于您可以实际滚动并且不需要编写脚本来完成这项工作时，内容就不会向左移动。
回答by Vladimir Starkov
if you are not need scrollbar at all, you can use this:
如果你根本不需要滚动条，你可以使用这个：
body {
overflow-y: hidden;
}
UPD.so if you need scrollbar to scroll content, but want to hide it, you can use the following method (demo on dabblet.com):
更新。因此，如果您需要滚动条来滚动内容，但又想隐藏它，您可以使用以下方法（dabblet.com 上的演示）：
css:
css：
body {
overflow: hidden;
}
#fake_body {
position: absolute;
left: 0;
top: 0;
right: -32px;
bottom: 0;
overflow-y: scroll;
}
html:
html：
<div id="fake_body">
<ul>
<li>content content content #01</li>
<li>content content content #02</li>
<li>content content content #03</li>
…
<li>content content content #55</li>
</ul>
</div>
回答by Ilya
I had the same problem and only solution using JS/jQuery was enough good for me.
我遇到了同样的问题，只有使用 JS/jQuery 的解决方案对我来说就足够了。
I used link to Detect if a page has a vertical scrollbar?provided before and those links: http://davidwalsh.name/detect-scrollbar-width, http://api.jquery.com/css/#css2, Center a position:fixed elementfor generating the following code.
我使用链接来检测页面是否有垂直滚动条？之前提供和那些链接：http://davidwalsh.name/detect-scrollbar-width，http://api.jquery.com/css/#css2，居中位置：用于生成以下代码的固定元素。
css:
css：
body {
position: absolute;
left: 50%;
margin-left: -400px;
width: 800px;
height: 100%;
}
.scrollbar-measure {
width: 100px;
height: 100px;
overflow: scroll;
position: absolute;
top: -9999px;
}
JS:
JS：
$(document).ready(function() {
// Check if body height is higher than window height :)
if ($(document).height() > $(window).height()) {
// Create the measurement node
var scrollDiv = document.createElement("div");
scrollDiv.className = "scrollbar-measure";
document.body.appendChild(scrollDiv);
// Get the scroll bar width
var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
// Delete the DIV
document.body.removeChild(scrollDiv);
// Change margin-left parameter for #container for preventing shift caused by scroll bar
var current_margin_left_px = $("#container").offset().left;
var current_margin_left = parseInt(current_margin_left_px, 10);
var changed_margin_left = current_margin_left + scrollbarWidth/2 + "px";
$("#container").css("margin-left", changed_margin_left);
}
});
In case of flexible body width some more code has to be added.
在灵活的主体宽度的情况下，必须添加更多代码。
回答by Kyle Zimmer
The following is not supported well across browsers, as per MDN docs, however I think you may find it interesting.
根据MDN 文档，浏览器不支持以下内容 ，但我认为您可能会觉得它很有趣。
overflow-y: overlay;
In browsers that support the property, such as Google Chrome, this will put the scrollbar on top of your content instead of shifting your content over when a scrollbar is needed. You could then add a sufficient amount of padding so that your content is never covered up by it.
在支持该属性的浏览器（例如 Google Chrome）中，这会将滚动条放在您的内容之上，而不是在需要滚动条时将您的内容移过去。然后，您可以添加足够数量的填充，以便您的内容永远不会被它覆盖。
It seems this property is not popular, and even browsers that support it now are planning to drop support for it. I don't understand why, because it certainly has its uses.
这个属性似乎并不流行，甚至现在支持它的浏览器也计划放弃对它的支持。我不明白为什么，因为它肯定有它的用途。
回答by bassem ala
you can check if the screen has a scroll bar. if true than you could margin the content to the right maybe this link will help you : Detect if a page has a vertical scrollbar?
您可以检查屏幕是否有滚动条。如果为真，您可以将内容向右加边距，也许此链接会对您有所帮助：检测页面是否具有垂直滚动条？
回答by dondre
overflow-x: hidden;
in the body CSS code, HELPED AlOT!Damn, took me 45mins to surf around for a simplistic answer.
在正文 CSS 代码中，帮助很大！该死，我花了 45 分钟浏览了一个简单的答案。
what went wrong? ...I had an with a hover=show image thing going on. I resized all the images correctly; when I refreshed the page, the scrollbar had way to much play room!.....So i put an overflow-x into each and every div tag, (each div tag assigned to individual list item), and nothing happened! solution: The code was correct, but the placement needed to be in the body tag itself. not the individual div tags. Damn.....thankz
什么地方出了错？...我有一个悬停=显示图像的事情。我正确调整了所有图像的大小；当我刷新页面时，滚动条有很大的游戏空间！...所以我将一个溢出-x 放入每个 div 标签中，（每个 div 标签分配给单个列表项），但什么也没发生！解决方案：代码是正确的，但位置需要在 body 标签中。不是单个 div 标签。该死的.....谢谢
