javascript - 每当浏览器添加滚动条时，内容会水平跳转

Question

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

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

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

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

score 22 · Accepted Answer

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

他所做的是添加这个CSS：

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

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

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

score 7 · Accepted Answer

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

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

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

Facebook 使用选项 2。

score 7 · Accepted Answer

7

使用这个 CSS：

body { overflow-y: scroll; }

于 2012-02-08T21:54:07.760 回答

score 3 · Accepted Answer

3

您可以强制滚动条始终出现：

于 2012-02-08T21:49:24.337 回答

score 1 · Accepted Answer

过程是：

html {
   overflow-y: scroll !important;
}

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

score 0 · Accepted Answer

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

html {
    overflow: hidden;
 }

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

score 0 · Accepted Answer

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

body {
  overflow-anchor: none;
}

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

7 回答 7