Javascript 每当浏览器添加滚动条时，内容水平跳转 我使用固定宽度的正文和自动边距将我的内容集中在页面中间。当内容超过页面高度且浏览器添加滚动条时，自动边距将强制内容向左跳跃滚动条宽度的一半

比较outerHeight和window.innerHeight是否是解决此问题的适当方法？还有别的办法解决这个问题吗

我认为这应该是足够的信息的问题，但让我知道，如果我可以回答任何其他问题

---

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

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

---

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

始终强制滚动条出现：

body{overflow-y:scroll；}

在

html

上设置它在所有浏览器中都不起作用，或者如果滚动条出现，可能会出现双滚动条

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

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

Facebook使用选项2。

使用此CSS：

body { overflow-y: scroll; }

---

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

他所做的是添加以下css：

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

这会将内容向左移动到滚动条的大小，因此当它出现时，内容已被移动。这适用于具有

溢出：自动的中心内容应用于
html
标记。媒体查询对移动电话禁用此功能，因为它在边距宽度上的差异非常明显

您可以在此处看到一个示例：

过程是：

html {
   overflow-y: scroll !important;
}

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

html {
    overflow: hidden;
 }

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

对我来说，解决办法是将这条规则添加到正文中：

body {
  overflow-anchor: none;
}

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

选项1适用于所有浏览器，较旧的浏览器默认包括所有页面上的滚动。Facebook之所以这样做，是因为他们不希望滚动条在没有必要的情况下显示。我认为这会导致某些浏览器出现双滚动条的问题（滚动条将位于
正文中
）。已经有一段时间了，我真的不想再测试这个了：是的。。。但是如果我不想强制滚动条呢？如果我不想让浏览器有滚动条，而它却不需要滚动条怎么办？@elclanrs在你成为一个混蛋之前读了我的问题。我不是试图强制滚动条，而是试图在跳转出现时停止跳转。然后类似的内容可能会帮助查看我的编辑。我不想在不必要的时候强制滚动条。太好了！我不想要两个利润率，所以我应用了负的右利润率：右利润率：calc（-100vw+100%）；此外，我还必须杀死底部卷轴：overflow-x:hidden；请注意，这只适用于内容左侧存在空白的情况。好答案@ulu您应该发布它。这很好。现在，如何在具有
溢出：auto
的div上执行此操作？对于本身不是视口全宽的元素，是否有一个与
100vw
等效的方法？html节点上的“溢出：隐藏”可防止浏览器在使用导航按钮时记住scoll状态