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

Content jumps horizontally whenever browser adds a scrollbar

本文关键字：水平 浏览器 添加 滚动条      更新时间：2023-09-26

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

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

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

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

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

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

使用此CSS:

body { overflow-y: scroll; }

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

  1. 始终强制显示滚动条：body { overflow-y: scroll; }在html上设置它并不适用于所有浏览器，或者如果滚动条出现，可能会给两个滚动条。

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

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

Facebook使用选项2。

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

http://www.mediacollege.com/internet/css/scroll-always.html

流程为：

html {
   overflow-y: scroll !important;
}

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

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

body {
  overflow-anchor: none;
}

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

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

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

html {
    overflow: hidden;
 }
body {
    overflow-y: auto;
    -webkit-overflow-scrolling:touch;
}
相关文章：