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

【问题标题】：scrollbar on browser and div margin 0 auto jumping浏览器上的滚动条和 div 边距 0 自动跳转
【发布时间】：2017-06-20 23:19:54
【问题描述】：

我正在使用 div#wrapper margin: 0 auto 使 div 居中，此页面上有滚动条，但是当它转换到没有滚动条的第二页时，它看起来很跳跃，因为我猜没有滚动条.

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

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

最好的解决方案是什么？

【问题讨论】：

标签： html css

【解决方案1】：

设置html宽度等于viewport，关闭水平滚动，避免垂直展开html时出现水平滚动条。

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

【讨论】：

我希望我能给这个代码 1000 分。我已经尝试解决一个问题好几个小时了，这就是解决方案。当方向是 RTL 时，我的网站（基于引导程序）上有一些奇怪的跳跃行为。在页面加载时，内容在最右边出现 1/10 秒，然后跳转到中心（margin: 0 auto 应该如此）并且延迟应用 col-md-3 宽度。这个css 解决了所有这些问题，为什么，不知道 :-)

【解决方案2】：

我遇到过几次这种情况，我发现最好的办法是在每个页面上强制一个 Y 滚动条，即使在您的风格中不需要它也是如此表：

html { overflow-y: scroll; }

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

【讨论】：

【解决方案3】：

如果存在滚动条，则向 html 标签添加计算出的边距将在左侧创建与右侧滚动条相等的边距。这将停止跳跃。

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

【讨论】：

这是最聪明最一致的答案。不过，我已经将这种样式应用于body（body { margin: 0; margin-left: calc(100vw - 100%); }）。

【解决方案4】：

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

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

【讨论】：