我有一个中心对齐的DIV网站。现在，有些页面需要滚动，有些不需要。当我从一种类型移动到另一种类型时，滚动条的外观会将页面向侧面移动几个像素。如果没有在每个页面上明确显示滚动条，有什么办法可以避免这种情况？
overflow-y: overlay其折旧价格为：developer.mozilla.org/en-US/docs/Web/CSS/overflow
Answers:
overflow-y：scroll是正确的，但是您应该将其与html标记一起使用，而不是body，否则在IE 7中会得到一个双滚动条，
因此正确的CSS应该是：
html {
overflow-y: scroll;
}将可滚动元素的内容包装到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>诀窍是100vw代表包括滚动条在内的100％视口。如果减去100%，这是没有滚动条的可用空间，则最终会导致滚动条的宽度增大或者宽度0不存在。在左侧创建该宽度的填充将模拟第二个滚动条，将居中的内容移回右侧。
请注意，这仅在可滚动元素使用页面的整个宽度时才有效，但是在大多数情况下这应该没有问题，因为在其他情况下，以可滚动内容为中心的情况很少。
@media screen and (min-width: 800px) {...} 。如果内容适合页面宽度。例如，在较小的分辨率上，会出现不必要的间隙，将内容向右移动
我觉得不是。但是造型body与overflow: scroll应该做的。不过，您似乎知道这一点。
overflow-y: scroll:)
总是显示滚动条，可能不利于布局。
尝试使用CSS3限制车身宽度
body {
width: calc(100vw - 34px);
}vw是视口的宽度（请参阅此链接的一些解释）
calc计算CSS3
34px代表双滚动条的宽度（见本固定或此计算，如果你不信任固定大小）
padding-left: 34px;了平均居中的页面。
html {
overflow-x: hidden;
margin-right: calc(-1 * (100vw - 100%));
}实例。单击“更改最小高度”按钮。
使用calc(100vw - 100%)我们可以计算滚动条的宽度（如果未显示，则为0）。想法：使用负的右边距，我们可以将的宽度<html>增加到该宽度。您将看到一个水平滚动条-应该使用将其隐藏overflow-x: hidden。
calc(100% - 100vw)而不是乘以-1？
我不知道这是否是旧帖子，但是我遇到了同样的问题，如果您只想垂直滚动，则应该尝试 overflow-y:scroll
通过在视口大小减去滚动条的宽度中显式设置javascript主体的宽度，我已经在我的一个网站上解决了该问题。我使用此处记录的基于jQuery的函数来确定滚动条的宽度。
<body id="bodyid>
var bodyid = document.getElementById('bodyid');
bodyid.style.width = window.innerWidth - scrollbarWidth() + "px";使用以下方法扩展答案：
body {
width: calc(100vw - 17px);
}一位评论者建议也添加左填充以保持居中：
body {
padding-left: 17px;
width: calc(100vw - 17px);
}但是，如果您的内容比视口宽，那么看起来就不正确。要解决此问题，您可以使用媒体查询，如下所示：
@media screen and (min-width: 1058px) {
body {
padding-left: 17px;
width: calc(100vw - 17px);
}
}其中1058px =内容宽度+ 17 * 2
这样，当视口足够宽以包含固定宽度的内容时，水平滚动条可以处理x溢出并保持居中的内容居中
扩展Rapti的答案，这应该同样有效，但是它在的右侧增加了更多的边距，body并以负的html边距将其隐藏，而不是添加可能会影响页面布局的额外填充。这样，在实际页面上（在大多数情况下）没有任何变化，并且代码仍然可以正常工作。
html {
margin-right: calc(100% - 100vw);
}
body {
margin-right: calc(100vw - 100%);
}overflow-x: hidden并解决了。
@kashesandr的解决方案对我有用，但是为了隐藏水平滚动条，我为主体添加了另一种样式。这是完整的解决方案：
的CSS
<style>
/* prevent layout shifting and hide horizontal scroll */
html {
width: 100vw;
}
body {
overflow-x: hidden;
}
</style>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解决方案（从第一个模态打开第二个模态时）：
/**
* 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);
}
});我曾经有这个问题，但是解决它的简单方法是这样（对我有用）：
在CSS文件上输入：
body{overflow-y:scroll;}就这么简单！:)
使用calc（100vw-100％）发布的解决方案在正确的轨道上，但是存在一个问题：即使您调整窗口的大小，也将永远在滚动条尺寸的左侧留有边距。内容将填满整个视口。
如果您尝试通过媒体查询解决此问题，则会遇到一个尴尬的捕捉时刻，因为在调整窗口大小时，边距不会逐渐变小。
这是解决该问题的解决方案，并且AFAIK没有缺点：
代替使用margin：自动将内容居中，请使用以下方法：
body {
margin-left: calc(50vw - 500px);
}将500px替换为内容最大宽度的一半（因此在本示例中，内容最大宽度为1000px）。现在，内容将保持居中，边距将一直减小，直到内容填满视口。
为了在视口小于最大宽度时阻止边距变为负数，只需添加媒体查询，如下所示：
@media screen and (max-width:1000px) {
body {
margin-left: 0;
}
}等等！
如果表格的宽度不会改变，则可以设置包含滚动条的元素（例如tbody）的宽度> 100％（为滚动条留出额外的空间），并将overflow-y设置为“ overlay”（覆盖）滚动条保持固定，并且在出现时不会向左移动表格）。还要使用滚动条为元素设置固定的高度，以便一旦超过高度，滚动条就会出现。像这样：
tbody {
height: 100px;
overflow-y: overlay;
width: 105%
}注意：您必须手动调整宽度％，因为滚动条占用的空间百分比将相对于表格宽度（即：表格宽度较小，需要更大的百分比来容纳滚动条，因为它的像素大小是恒定的） ）
一个动态表示例：
function addRow(tableID)
{
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++)
{
var newRow = row.insertCell(i);
newRow.innerHTML = table.rows[0].cells[i].innerHTML;
newRow.childNodes[0].value = "";
}
}
function deleteRow(row)
{
var table = document.getElementById("data");
var rowCount = table.rows.length;
var rowIndex = row.parentNode.parentNode.rowIndex;
document.getElementById("data").deleteRow(rowIndex);
}.scroll-table {
border-collapse: collapse;
}
.scroll-table tbody {
display:block;
overflow-y:overlay;
height:60px;
width: 105%
}
.scroll-table tbody td {
color: #333;
padding: 10px;
text-shadow: 1px 1px 1px #fff;
}
.scroll-table thead tr {
display:block;
}
.scroll-table td {
border-top: thin solid;
border-bottom: thin solid;
}
.scroll-table td:first-child {
border-left: thin solid;
}
.scroll-table td:last-child {
border-right: thin solid;
}
.scroll-table tr:first-child {
display: none;
}
.delete_button {
background-color: red;
color: white;
}
.container {
display: inline-block;
}
body {
text-align: center;
}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="test_table.css">
</head>
<body>
<h1>Dynamic Table</h1>
<div class="container">
<table id="data" class="scroll-table">
<tbody>
<tr>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><input type="button" class="delete_button" value="X" onclick="deleteRow(this)"></td>
</tr>
</tbody>
</table>
<input type="button" value="Add" onclick="addRow('data')" />
</div>
<script src="test_table.js"></script>
</body>
</html>我用一些jQuery来解决这个问题
$('html').css({
'overflow-y': 'hidden'
});
$(document).ready(function(){
$(window).load(function() {
$('html').css({
'overflow-y': ''
});
});
});与公认的答案相反，即使内容没有溢出屏幕，建议在浏览器窗口上显示一个永久滚动条，我还是喜欢使用：
html{
height:101%;
}这是因为如果内容实际溢出，则滚动条的外观更有意义。
overflow-y: overlay在此线程中提及？