gpt4 book ai didi

javascript - Chrome滚动错误?

转载 作者:行者123 更新时间:2023-12-04 09:00:57 25 4
gpt4 key购买 nike

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

  • Chrome 84.0.4147.135(官方版本)
  • Chrome 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 将其更改为新位置。

    最佳答案

    这不是一个错误。发生的事情是:

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

  • 我不知道您解决此问题的最佳方法是什么,但这似乎有效:
    javascript:location.hash='#bottom';document.documentElement.scrollTop=0;undefined;

    关于javascript - Chrome滚动错误?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63567924/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com