只要浏览器添加滚动条,内容就会水平跳转

Question

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

将outerHeight与window.innerHeight进行比较是一种解决这个问题的合适方法吗？还有另一种解决方法吗？

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

编辑以澄清:我不想强制滚动条出现.

Answer 1

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

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

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

Facebook 使用选项 2。

Answer 2

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

他所做的是添加此CSS：

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

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

您可以在此处查看示例：

优秀！我不想同时使用两个边距，因此我改用负负边距：margin-right：calc（-100vw + 100％）; 另外，我不得不杀死最下面的滚动：overflow-x：隐藏； (3认同)
请注意，这仅适用于内容左侧存在空白边距的情况。 (2认同)

Answer 3

使用这个 CSS：

body { overflow-y: scroll; }

Answer 4

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