通过js添加内容时Chrome自动滚动页面

【问题标题】：Chrome auto scrolling page when content adds via js通过js添加内容时Chrome自动滚动页面
【发布时间】：2020-08-13 13:40:36
【问题描述】：

我有一个包含大量列流内容的页面。在页面底部有一个“添加”按钮，用于在底部添加一些新内容。当我点击它时，Chrome 会向下滚动页面并添加内容。

https://jsfiddle.net/gydn7ptk/4/show - jsfiddle。当我向下滚动并单击“添加”时，我可以在控制台中看到“已滚动”。

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

【问题讨论】：

标签： javascript html google-chrome

【解决方案1】：

自 Chrome 84 起，滚动锚定选择已更新（请参阅 Chrome commit）。

要避免滚动，您必须移除点击元素上的焦点。

在您的示例中，您需要在点击功能上添加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')});

【讨论】：

这太有用了！谢谢！