【问题标题】:Odd auto scroll / jump behavior in Chrome (iOS) when navigating to next page导航到下一页时,Chrome (iOS) 中的奇怪自动滚动/跳转行为
【发布时间】:2017-07-09 15:48:08
【问题描述】:

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

如果我:

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

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

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

还有一件更有趣的事情。

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

有什么线索吗?

Safari (iOS) 没有这个问题。

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

更新

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

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

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

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

【问题讨论】:

  • 请添加一些代码.. sn-p 和/或小提琴对于重现问题非常有用。另外你用的是什么版本的chrome?请详细说明您的问题
  • 这可能是由 Chrome 56 中引入的滚动锚定引起的。这可以防止页面在加载内容时上下跳跃。你能降级到旧版本并仍然重现这个吗?
  • 更新示例

标签: html ios css google-chrome


【解决方案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/

    【讨论】:

    • 我不使用任何锚点 (#)。
    猜你喜欢
    • 2013-05-28
    • 1970-01-01
    • 2017-12-14
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多