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

Posted

技术标签:

【中文标题】导航到下一页时,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/

【讨论】:

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

以上是关于导航到下一页时,Chrome (iOS) 中的奇怪自动滚动/跳转行为的主要内容,如果未能解决你的问题,请参考以下文章

单击按钮移动到下一页时出错

移动到下一页时不显示对话框[重复]

我在应用程序加载而不是图像时开发启动视频。并且​​还使用 ios 中的推送视图控制器导航到下一页

每次滑动到下一页时,内存都会增加很多。仪器泄漏报告和静态分析仪都可以

每次Navigator.push到下一页时都会调用的回调

带有 uitableview 的基于页面的应用程序;转到下一页时如何显示详细视图并在表格中显示其他数据?