Question

我正在使用div＃wrapper margin: 0 auto来居中div，此页面上有滚动条但是当它转换到没有滚动条的第二页时，它显示为跳跃，因为没有滚动条我想。

<body>
<div id="wrap">
<div id="wrapper">
....

#wrapper { width: 970px; margin: 0 auto; }

最好的解决办法是什么才能让它变得浑浊？

Answer 1

我遇到过这几次，我发现最好的办法是在每个页面上强制使用 Y滚动条，即使不需要使用你的风格片：

html { overflow-y: scroll; }

这意味着页面上总会有一个右滚动条，但会根据需要启用/禁用它，并阻止跳转。

Answer 2

将html宽度设置为等于视口并关闭水平滚动以避免在垂直滚动条扩展html时出现水平滚动条。

html {
  width: 100vw;
  overflow-x: hidden;
}

Answer 3

如果您不想在每个页面上强制使用Y滚动条，则可以使用视口宽度计算边距。这阻止了我的自动跳跃。

@media (min-width: 960px) {
    .container {
        margin-left: calc(50vw - 480px);
        width: 960px;
    }
}

Answer 4

如果存在滚动条，则向html标记添加计算边距将在左侧创建等于右侧滚动条的边距。这将阻止跳跃。

html { 
    margin-left: calc(100vw - 100%); 
}