每当浏览器添加滚动条时，内容会水平跳转答案

【问题标题】：Content jumps horizontally whenever browser adds a scrollbar每当浏览器添加滚动条时，内容会水平跳转
【发布时间】：2012-03-01 09:34:05
【问题描述】：

我使用固定宽度的正文和自动边距将我的内容置于页面中间。当内容超出页面高度并且浏览器添加滚动条时，自动边距会强制内容向左跳转滚动条宽度的一半。

比较outerHeight 和window.innerHeight 是解决这个问题的合适方法吗？有没有其他方法可以解决这个问题？

我认为这应该是解决问题的足够信息，但如果我能回答其他问题，请告诉我。

编辑澄清：我不想强制滚动条出现。

【问题讨论】：

【解决方案1】：

对我来说，解决方案是将此规则添加到正文中：

body {
  overflow-anchor: none;
}

此规则是最近添加的，旨在减少浏览器的可变性，这些浏览器对于它们应该如何应对溢出有不同的默认假设。例如，Chrome 默认启用溢出锚定，而 Firefox 则没有。设置此属性将强制两个浏览器的行为方式相同。

【讨论】：

【解决方案2】：

通过 CSS 的最佳方式，它将相应地显示/隐藏滚动条，将解决跳转问题，适用于所有浏览器

html {
    overflow: hidden;
 }

body {
    overflow-y: auto;
    -webkit-overflow-scrolling:touch;
}

【讨论】：

【解决方案3】：

过程是：

html {
   overflow-y: scroll !important;
}

即使不需要任何滚动条也会显示滚动条。

【讨论】：

【解决方案4】：

我将把这个链接留在这里，因为它对我来说似乎是一个优雅的解决方案：

他所做的就是添加这个css：

@media screen and (min-width: 960px) {
    html {
        margin-left: calc(100vw - 100%);
        margin-right: 0;
    }
}

这会将内容向左移动到滚动条的大小，所以当它出现时，内容已经被移动了。这适用于将overflow: auto; 应用于html 标签的居中内容。媒体查询对手机禁用此功能，因为边距宽度的差异非常明显。

您可以在此处查看示例：

【讨论】：

太棒了！我不想要 both 边距，所以我应用了一个负的右边距：margin-right: calc(-100vw + 100%);另外，我不得不杀掉底部滚动条：overflow-x:hidden;
请注意，这仅在您的内容左侧存在空白边距时才有效。
好的答案@ulu 你应该发布它。
这很棒。现在如何在具有overflow: auto 的 div 上执行此操作？对于本身不是视口全宽的元素，是否有等效于 100vw 的元素？

【解决方案5】：

使用这个 CSS：

body { overflow-y: scroll; }

【讨论】：

【解决方案6】：

我自己也遇到过这个问题，我找到了两种解决方法：

始终强制显示滚动条： body { overflow-y: scroll; } 将其设置在 html 上并不适用于所有浏览器，或者如果滚动条确实出现，可能会出现双滚动条。
添加一个类，如果没有滚动条，则在页面的右边距增加约 30 像素。

我选择了选项 1，但我不确定它是否适用于所有浏览器（尤其是旧浏览器）。

Facebook 使用选项 2。

【讨论】：

【解决方案7】：

您可以强制滚动条始终出现：

【讨论】：