浏览器上的滚动条和div边距0自动跳转

| 我正在使用div＃wrappermargin: 0 auto将div居中，此页面上有滚动条，但是当它过渡到没有滚动条的第二页时，由于没有滚动条，它看起来像是跳动的。

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

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

最好的解决方案是什么呢？

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

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

, 我已经遇到过几次了，我发现最好的方法是在每个页面上强制使用Y滚动条，即使您的样式表中不需要使用它也是如此：

html { overflow-y: scroll; }

这意味着页面上总会有一个右滚动条，但是会根据需要启用/禁用它，并防止跳转。 , 如果存在滚动条，则将计算出的边距添加到html标记中将在左边创建一个与右边的滚动条相等的边距。这将停止跳跃。

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

原始资料 , 如果不想在每个页面上强制使用Y滚动条，则可以使用视口宽度来计算边距。这为我停止了自动跳跃。

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

相关问答