为什么 Chrome 自动滚动以包含单击的元素？

Question

最近我注意到在执行 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) 中，点击的按钮如何保持在视图中，这与人们的预期相反。

Answer 1

这称为滚动锚定，feature/flag 已经在 Chromium 中使用了好几年了。

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

body {
    overflow-anchor: none;
}

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

As a user of the web, you are probably familiar with the problem that scroll anchoring solves. You browse to a long page on a slow connection and begin to scroll to read the content; while you are busy reading, the part of the page you are looking at suddenly jumps. This has happened because large images or some other elements have just loaded further up in the content.

Scroll anchoring is a browser feature that aims to solve this problem of content jumping, which happens if content loads in after the user has already scrolled to a new part of the document.

为什么 Chrome 自动滚动以包含单击的元素？

Why does Chrome auto-scroll to contain the clicked element?

html

javascript

css

chromium