每当浏览器添加滚动条时，内容就会水平跳跃

Question

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

将outerHeight 与window.innerHeight 进行比较是解决此问题的适当方法吗？还有其他方法可以解决这个问题吗？

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

编辑以澄清：我不想强制显示滚动条。

Answer 1

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

https:// aykevl.nl/2014/09/fix-jumping-scrollbar

他所做的是添加这个 css：

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

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

您可以在此处查看示例：

http://codepen.io/anon/pen/NPgbKP

Answer 2

使用这个CSS：

body { overflow-y: scroll; }

Answer 3

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

1. 始终强制滚动条存在：
   body { 溢出-y：滚动； } 在 html 上设置它并不适用于所有浏览器，或者如果滚动条确实出现，可能会出现双滚动条。

2. 添加一个类，如果没有滚动条，该类会向页面的右边缘添加约 30 像素。

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

Facebook 使用选项 2。

Answer 4

您可以强制滚动条始终显示：

http://www.mediacollege.com/ internet/css/scroll-always.html

Answer 5

过程是：

html {
   overflow-y: scroll !important;
}

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

Answer 6

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

html {
    overflow: hidden;
 }

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

Answer 7

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

body {
  overflow-anchor: none;
}

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

https://developer.mozilla.org/en-US/文档/Web/CSS/overflow-anchor