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

Question

我正在使用固定宽度的页面主体和自动边距将内容居中在页面的中央。当内容超出页面的高度并且浏览器添加滚动条时，自动边距会使内容向左跳动滚动条宽度的一半。

比较outerHeight和window.innerHeight是否是解决此问题的适当方法？还有其他解决方法吗？

我认为这应该足够解决问题了，但如果需要我回答其他问题，请告诉我。

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

- Nick Bergseng

---

那么像http://jdsharp.us/jQuery/minute/calculate-scrollbar-width.php这样的东西可能会有所帮助。 - elclanrs

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

- xabitrigo

---

太好了！我不想要两个边距，所以我使用了负的右边距：margin-right: calc(-100vw + 100%); 此外，我还需要禁用底部滚动条：overflow-x: hidden; - ulu

请注意，仅当您的内容左侧存在空白边距时，此方法才有效。 - dwjohnston

好的回答 @ulu，你应该发布它。 - dwjohnston

这很棒。现在我如何在具有 overflow: auto 的 div 上执行它？对于那些本身不是视口的完整宽度的元素，是否有类似于 100vw 的等效物？ - poshest

Answer 2

使用以下CSS：

body { overflow-y: scroll; }

- Sam Starling

Answer 3

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

1. 始终强制显示滚动条:body { overflow-y: scroll; } 在html上设置它在所有浏览器中可能不起作用，或者如果滚动条出现，则可能会出现双重滚动条。

2. 如果没有滚动条，则添加一个类，将您的页面右边距增加约30像素。

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

Facebook使用选项2。

- Halcyon

---

选项1适用于所有浏览器，老旧的浏览器默认情况下在所有页面上包含滚动条。Facebook使用选项2是因为他们不希望滚动条显示，如果没有必要的话。 - thenetimp

我认为这会在某些浏览器上出现双滚动条的问题（滚动条将位于“body”中）。已经过了一段时间，我真的不想再测试这个了:P - Halcyon

啊，是的...但如果我不想强制出现滚动条呢？如果我希望浏览器在不需要滚动条时不显示滚动条呢？ - Nick Bergseng

如果你省略解决方案中真正困难的部分，读者将无法使用选项2...（我知道你可能使用了什么，但这只是一个不完整的答案...） - undefined

Answer 4

你可以强制显示滚动条： http://www.mediacollege.com/internet/css/scroll-always.html

- Mikey G

---

请看我的编辑。如果不必要，我不想强制出现滚动条。 - Nick Bergseng

Answer 5

这个过程是：

html {
   overflow-y: scroll !important;
}

这将显示滚动条，即使没有必要出现滚动条。

- Sanjib Debnath

Answer 6

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

body {
  overflow-anchor: none;
}

这个规则是最近添加的，旨在减少浏览器对溢出内容的默认反应方式不同而导致的差异性。例如，Chrome 默认启用了溢出锚定，而 Firefox 则没有。设置此属性将强制两个浏览器以相同的方式运行。

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

- Clayton Collins

---

有趣的属性，我之前并不知道，但实际上与问题无关（问题是关于滚动条出现时布局的变化，而不是内容变化时滚动位置的变化）。 - undefined

Answer 7

通过CSS的最佳方式，它将相应地显示/隐藏滚动条，解决跳跃问题，在每个浏览器上都可以工作。

html {
    overflow: hidden;
 }

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

- Suman

---

在HTML节点上使用"overflow: hidden"可以防止浏览器在使用导航按钮时记住滚动状态。 - alternize