平滑滚动，然后专注于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

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

也许有某种原因使您无法使用此解决方案，但是您可以通过简单地反转方法调用的顺序来实现。 首先聚焦，然后执行滚动到视图。

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

对于最终用户，我想无论如何，综合效果都是一样的。