javascript - 平滑滚动然后聚焦于 Angular2 应用程序

Question

我正在使用 Angular2+ 创建一个应用程序，我希望平滑滚动到输入然后将焦点设置到该输入。我正在做这样的事情:

 scroll(id){
    document.getElementById(id).scrollIntoView({block: "start", behavior: "smooth"});
    document.getElementById(id).focus();
  }

平滑滚动部分工作正常，直到我添加焦点代码。我认为发生的情况是，当我设置焦点时，它会覆盖滚动效果。如何在设置焦点之前让滚动完成？

以下代码演示了我的意思:https://stackblitz.com/edit/angular-t4ousw

Answer 1

更新:显然此解决方案不适用于所有浏览器

也许有些东西阻止您使用此解决方案，但您可以通过简单地颠倒方法调用的顺序来实现此目的。首先聚焦，然后执行滚动到 View 中。

scroll(id){
  document.getElementById(id).focus();
  document.getElementById(id).scrollIntoView({block: "start", behavior: "smooth"});
}

对于最终用户来说，我想无论如何，组合效果是相同的。