Smooth Scroll然后将焦点放在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"});
}

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