通过强制出现滚动条消除水平居中的“跳动”

您可能知道，页面居中技术是向外部 div 添加自动左右边距。

#page-wrap {
  margin: 0 auto;
}

此技术的缺点之一是，当在具有多个页面的网站上使用时，在需要滚动条的页面和不需要滚动条的页面之间来回切换时，布局可能会出现轻微的“跳动”。这是因为浏览器窗口中滚动条的宽度约为 16px，导致内容区域变窄，而包裹 div 在较窄的内容区域中重新居中，从而导致跳动。

消除此跳动的一种方法是，无论页面是否需要，都强制在每个页面上显示滚动条。这可能会让一些纯粹主义者感到恼火，但我认为这是一个不错的解决方案。

这是一种实现方法，它强制页面始终比浏览器窗口略高，从而强制出现右侧滚动条。

html {
  height: 100%;
  margin-bottom: 0.01em;
}

这是一个好主意，但它似乎在 Firefox 中无法正常工作。

以下是一种使用令人讨厌且无意义的 hack 强制仅显示右侧滚动条的方法。

#scroll {
    position: absolute;
    top: 0;
    bottom: -0.1px;
    width: 1em;
    z-index: -1;
}

然后只需在您的 HTML 中包含一个带有“scroll” id 的空 div。就像我说的，这是一种比较糟糕的方法，这里有一个更简洁的方法。

html {
  height: 102%;
}

以下是一种解决方案，它有效地强制同时显示水平和垂直滚动条。

html {
  overflow: scroll;
}

您可以在 此示例 中看到此方法的工作效果。如果我们可以通过将 overflow-y 设置为 scroll 来仅获得垂直滚动条，那就太好了，但它在 Firefox 中仍然不起作用。更新：实际上，我已经明白了。将 overflow-y 设置为 scroll **确实有效**，并且在 Firefox、Safari 和 IE 6 中均有效，这使其成为**最佳解决方案**。

html {
  overflow-y: scroll; 
}