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标记的居中内容。媒体查询禁用了手机，因为它非常明显的边距宽度差异。

你可以在这里看到一个例子：

Answer 3

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

Answer 4

使用此CSS：

body { overflow-y: scroll; }

Answer 5

过程是：

html {
   overflow-y: scroll !important;
}

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

Answer 6

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

body {
  overflow-anchor: none;
}

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

Answer 7

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

html {
    overflow: hidden;
 }

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