scrollIntoView 导致整个页面滚动

Question

当某个事件发生时，我想将div容器滚动到其可滚动区域的中心。 我正在使用scrollIntoView来实现这一点：

const target = document.getElementById('target-id');
target.scrollIntoView({ behavior: 'smooth', block: 'center' });

但是，这也会导致整个页面向上滚动。 正如这篇文章所强调的，这似乎是 Chrome 中的一个错误。 但是，我试图通过每次滚动时将页面滚动到顶部来否定它的效果。

const target = document.getElementById('target-id');
target.scrollIntoView({ behavior: 'smooth', block: 'center' });
window.scrollTo(0, 0);

但这不起作用，因为容器根本不滚动。 我相信这是因为我在调用scrollIntoView后立即尝试向上滚动整个页面。 我想在scrollIntoView animation 完成后滚动页面。 有没有办法做到这一点？

Answer 1

尝试包装它，使其在事件循环的下一轮执行：

setTimeout(()=>
  window.scrollTo(0, 0);
, 0);

Answer 2

您可以使用为 scrollIntoView() 定义的参数。

scrollIntoView 文档：

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

按照此链接获取解决方案： https://thewebdev.info/2022/04/21/how-to-fix-scrollintoview-causing-the-whole-page-to-move-with-javascript/#:~:text= move%20with%20JavaScript%3F-,To%20fix%20scrollIntoView()%20causing%20the%20whole%20page%20to%20move,block%20set%20to%20'nearest'%20.