导航到下一页时，Chrome (iOS) 中的奇怪自动滚动/跳转行为

Posted 2023-02-23

【中文标题】导航到下一页时，Chrome (iOS) 中的奇怪自动滚动/跳转行为

【英文标题】：Odd auto scroll / jump behavior in Chrome (iOS) when navigating to next page

【发布时间】：2017-07-09 15:48:08

【问题描述】：

我有一个位置固定的标题。然后我有一些内容；一些带有一些文本的 div。

如果我：

转到我网站的首页 向下滚动 点击任意链接

然后在下一页页面上，页面已经自动滚动了与地址栏大致相同的量！？

我不明白为什么它会自动滚动第二页 - 这与第一页无关？！

还有一件更有趣的事情。

如果我执行与上述完全相同的步骤，除了在单击任何链接之前我再次向上滚动（只是一点点），那么下一页将正确加载布局而不会自动滚动/跳转！？

有什么线索吗？

Safari (ios) 没有这个问题。

我已经搜索了 chromium 数据库和谷歌，但我只发现了其他类型的地址栏/滚动问题。这个肯定是已知的吧？！

更新：

重现此问题的最快和最简单的方法是设置两个内容完全相同的 .html 页面，每个页面使用一个简单的锚元素链接到另一个页面。两个页面的内容应该是来自 bootstrap.com (http://getbootstrap.com/examples/sticky-footer-navbar/) 的固定导航栏和页脚模板。完成该设置后，请执行以下操作：

加载页面1 滚动页面1 点击第 2 页的链接 滚动页面2 点击第 1 页的链接 重复直到滚动位置偏移

这种情况会间歇性发生。我无法根据命令复制它。尝试稍微向上滚动，以便您几乎看不到多功能框重新出现并且点击链接。

看起来像素偏移量等于多功能框的高度。

【问题讨论】：

请添加一些代码.. sn-p 和/或小提琴对于重现问题非常有用。另外你用的是什么版本的chrome？请详细说明您的问题

这可能是由 Chrome 56 中引入的滚动锚定引起的。这可以防止页面在加载内容时上下跳跃。你能降级到旧版本并仍然重现这个吗？

更新示例

【参考方案1】：

查看地址栏中的地址（查询字符串）（或链接的“href”地址）。如果有#（文档片段目标），则浏览器将查看用于匹配 id 的元素（# 之后的文本）。 如果地址中有#，后跟无文本，并且页面上有一个带有id=""（空白ID）的元素——或者如果有重复的元素ID，那么它可能会在浏览器尝试时导致不良问题找出滚动的位置。

还可以查看任何“服务器包含”，尤其是 javascript 和 CSS，它们可能会暂时干扰和禁用/注释掉这些，以将问题作为“消除过程”策略进行调试。

如果上述方法均无效，则问题可能与“扩展/插件”相关，或特定于设备。如果您有任何“帮助”工具作为浏览器扩展，它可能会干扰。尝试在其他符合标准的浏览器（如 Chromium、Firefox、Safari、Opera 等）上进行测试，无需额外扩展。

最后，确保它不是特定于设备的；在其他设备或普通台式机/笔记本电脑/智能手机上进行测试，看看问题是否仍然存在；如果不是，那么问题可能出在您用于测试的设备/软件上。

【参考方案2】：

检查您的滚动锚定功能是否已禁用。 对于 Google Chrom，请输入网址 "chrome://flags/#enable-scroll-anchoring"

如果您不希望浏览器锚定滚动位置，请确保它没有打开。

https://www.xda-developers.com/psa-enable-scroll-anchoring-in-google-chrome-to-prevent-annoying-page-jumps/

【讨论】：

我不使用任何锚点 (#)。