Chrome 滚动错误？答案

【问题标题】：Chrome Scrolling Bug?Chrome 滚动错误？
【发布时间】：2020-08-24 19:57:23
【问题描述】：

我正在与奇怪的 Chrome 行为作斗争，当页面加载时它会跳到页面底部，然后立即回到顶部。

可重现

Chrome 84.0.4147.135（官方版本）
铬 80.0.3987.162

条件

URL“#bottom”中必须有一个片段引用页面最底部的元素
Javascript 将尝试使用 html.scrollTop 在页面的最底部滚动

当两个条件都为真时，问题就会发生。页面跳到底部（有一个红色 div - 它闪烁红色），然后立即回到顶部（再次变为白色）。

当只有 '#bottom' 片段没有 javascript 或只有 javascript 没有 '#bottom' 片段时，一切都按预期工作 - 页面在最底部滚动时显示为红色。只有当这两种机制都使用时，它才不起作用。

预期行为

Javscript scrollTop 修改跳转到底部 - 页面保持红色（有效）
底部的片段引用跳转 - 页面保持红色（有效）
scrollTop 修改和片段引用都在底部跳转 - 页面保持红色（不起作用）

当前行为：

页面跳到底部 - 短暂变为红色 - 然后又向上跳并保持白色

注意：Chrome 似乎只是恢复了初始滚动位置。当您从底部开始并点击“CTRL+R”时，它会停留在底部。当您从顶部开始并按 CTRL+R 时，它会停留在顶部，同时会在页面的最底部短暂跳转。

简化代码：

<!DOCTYPE html>
<html>
    <body>
    <!-- Just a button that makes sure there is '#bottom' fragment in URL, resets scrolling and reloads page -->
    <a href="javascript:location='#bottom';document.documentElement.scrollTop=0;location.reload();" style="position: fixed;">
            CLICK TO TEST
            <div><small>Keep clicking and if you see RED BACKGROUND FLASH you can reproduce the problem.</small></div>
    </a>

    <!-- Two big divs with distinct colors so we can see color flash when it jumps -->
    <div id="top" style="background: white; height: 10000px;"></div>
    <div style="height: 500vh; background-color: red;"></div>

    <!-- bottom target referenced by '#bottom' above -->
    <div id="bottom">BOTTOM ANCHOR</div>

    <script type="text/javascript">
            document.documentElement.scrollTop = document.documentElement.scrollHeight;
    </script>
    </body>
</html>

我无法使用内联预览，因为它需要带有片段的 URL。你可以暂时看直播here。

编辑：观察 - 整个问题似乎是 Chrome 试图保留旧的 scrollTop 位置，尽管 Javascript 将其更改为新位置。

【问题讨论】：

我也可以在 Firefox 80 中重现。
我无法在 FF 中重现它，所以我认为我错误地描述了预期的行为。如果页面停留在“RED”末尾 - 它可以工作。如果它停留在“WHITE”结尾，那么就是我所描述的问题。很抱歉造成混淆，感谢您的测试！

标签： javascript html google-chrome blink

【解决方案1】：

这不是错误。发生的事情是：

页面向下滚动是因为JS设置了URL的hash。
页面向上滚动是因为JS设置了scrollTop属性。
页面重新加载（需要一些时间）。
因为哈希仍然是#bottom，一旦浏览器找到ID为bottom的元素，它就会滚动到它。

我不知道解决此问题的最佳方法是什么，但这似乎可行：

javascript:location.hash='#bottom';document.documentElement.scrollTop=0;undefined;

【讨论】：

ad 1. 无需点击，按住CTRL+R即可；广告 2. scrollTop 实际上跳到了最底部（我添加了 console.log() 消息检查你的 Javascript 控制台）问题是 javscript 和 URL 哈希都应该在底部结束。当我在 Chrome 和 Firefox 中运行它时，Chrome 停留在白页（不正确）和 FF 停留在红页（正确）。
注意：按下 CTRL+R 时，您需要先滚动到最顶部。似乎 Chrome 只是恢复了页面加载时的原始位置，并通过使用 URL 片段或 scrollTop JS 删除了任何疯狂的更改。