滚动条调整页面大小
比方说，我有一个静态网页，整个页面被封装，假设内部宽度为700px，现在如果页面内容太长（显然）会出现滚动条。 但滚动条的外观将所有东西都移动到左侧像几个像素（需要适合页面右侧的滚动条）。 我想要做的是消除这种“移动”效果，因此如果需要滚动条，这不会以任何方式影响页面的内容。
我不知道我是否清楚自己。
假设这是一个网页：
| ......... contentcontent ........ |
| ......... contentcontent ........ |
| ......... contentcontent ........ |
| ......... contentcontent ........ |
| ......... contentcontent ........ |
| ......... contentcontent ........ |
| ......... contentcontent ........ |
这是滚动条的外观：
| ..... contentcontent .......... | |
| ..... contentcontent .......... | |
| ..... contentcontent .......... | |
| ..... contentcontent .......... | |
| ...... contentcontent .......... | |
| ..... contentcontent .......... | |
| ..... contentcontent .......... | |
但我想要这样的东西：
| ......... contentcontent ...... | |
| ......... contentcontent ...... | |
| ......... contentcontent ...... | |
| ......... contentcontent ...... | |
| ......... contentcontent ...... | |
| ......... contentcontent ...... | |
| ......... contentcontent ...... | |
点代表空白，内容代表网页内容，右侧代表滚动条。
你可以设置overflow-y: scroll作为你身体的规则。 这将始终显示一个垂直滚动条，该滚动条被禁用，除非内容足够长以便滚动。 这种方式的内容不会向左移动，只要您可以实际滚动并且不需要脚本即可完成此项工作。
如果你根本不需要滚动条 ，你可以使用这个：
body {
overflow-y: hidden;
}
UPD。 所以如果你需要滚动条来滚动内容，但想隐藏它，你可以使用下面的方法（在dabblet.com上演示）：
CSS：
body {
overflow: hidden;
}
#fake_body {
position: absolute;
left: 0;
top: 0;
right: -32px;
bottom: 0;
overflow-y: scroll;
}
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>
我有同样的问题，只有使用JS / jQuery的解决方案对我来说已经足够了。
如果页面有垂直滚动条，我使用链接来检测？ 之前提供的以及这些链接：http://davidwalsh.name/detect-scrollbar-width，http://api.jquery.com/css/#css2，居中位置：用于生成以下代码的固定元素。
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：
$(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);
}
});
在灵活的身体宽度的情况下，需要添加更多的代码。
链接地址: http://www.djcxy.com/p/75799.html