Chrome为什么会自动滚动以包含clicked元素？

问题描述

最近我注意到，在执行Ajax页面更新（具体来说，附加到一个块，例如在“显示更多评论”方案中）时，Chrome开始执行某种自动滚动以使被单击的元素保持在视图中，似乎。

这是什么？为什么要引入它，以及如何摆脱这种行为？

可复制的最小代码：

$(document).ready(function() {
  var html = $(".container").html();
  $("#load-more").click(function(){
    $(".container").append(html);
  })
})

.container {
  width: 400px;
  margin: 0 auto;
  background-color: aqua;
  padding: 1em;
}

<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
  <body>
    <div class="container">
      <article>
        <h3>Foo Bar 1</h3>
        <p>hello world</p>
      </article>
      <article>
        <h3>Foo Bar 2</h3>
        <p>hello world</p>
      </article>
      <article>
        <h3>Foo Bar 3</h3>
        <p>hello world</p>
      </article>
    </div>
    <button id="load-more">load more</button>
    </body>
</html>

请注意，在Chrome（ium）中，单击的按钮是如何保持可见的，这与人们期望的相反。

解决方法

这被称为“滚动锚定”，并且在Chromium中已经有很多年了。

幸运的是，可以通过CSS禁用它。

body {
    overflow-anchor: none;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor/Guide_to_scroll_anchoring

作为Web的用户，您可能熟悉滚动锚定解决的问题。您在连接缓慢的情况下浏览至较长的页面，然后开始滚动以阅读内容。在您忙于阅读时，您正在查看的页面部分突然跳动。之所以发生这种情况，是因为大图像或其他一些元素刚刚在内容中进一步加载。

滚动锚定是一种浏览器功能，旨在解决此内容跳动的问题，如果在用户已经滚动到文档的新部分之后加载内容，就会发生这种情况。

chromium html javascript

Chrome为什么会自动滚动以包含clicked元素？

问题描述

解决方法

相关问答