当使用JavaScript动态加载页面内容时，Chrome浏览器会自动滚动页面。

Question

我有一个包含许多列流内容的页面。在页面底部有一个“添加”按钮，用于向底部添加一些新内容。 当我单击它时，Chrome会滚动页面并添加新内容。 https://jsfiddle.net/gydn7ptk/4/show - jsfiddle. 当我向下滚动并点击“添加”时，可以在控制台中看到“滚动”。

这是如何工作的？为什么Chrome会自动滚动页面？因为我想在更新后保持在相同的 scrollTop 位置。

- user1128677

Answer 1

自从Chrome 84版本以来，滚动锚定选择已经更新（请参见Chrome提交）。为了避免滚动，您需要取消所点击元素的焦点。在您的示例中，您需要在单击函数中添加e.target.blur();。

 $(document).on('click', '.update', (e) => {
      e.preventDefault();
      e.target.blur();
      for (var i = 20; i >= 0; i--) {
          $('.data').append('<div><article>data</article></div>')
      }
  })
  document.addEventListener("scroll", (e) => {console.log('scrolled')});

- Jouby

---

这太有用了！谢谢！ - HKG