scrollIntoView 导致整个页面滚动

Question

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

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

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

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

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

Answer 1

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

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