平滑滚动然后专注于 Angular2 应用程序答案

【问题标题】：Smooth Scroll then focus in an Angular2 app平滑滚动然后专注于 Angular2 应用程序
【发布时间】：2018-02-08 22:08:15
【问题描述】：

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

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

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

【问题讨论】：

【解决方案1】：

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

也许有些东西阻止您使用此解决方案，但您可以通过简单地颠倒方法调用的顺序来实现这一点。先聚焦，然后执行滚动进入视图。

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

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

【讨论】：

这似乎不适合我，当我设置焦点时，页面会跳转到该元素。然后当我尝试滚动到它时，它看起来很奇怪并且不能正确滚动。
@ahat91 有趣，这必须是特定于浏览器的。在我的 Chrome 63 的 Mac 上，焦点根本不会改变视图并且滚动流畅地进行。抱歉，我不知道有更好的解决方案。
@ahat91 实际上，另一个可能有效的解决方案是监视浏览器窗口滚动事件，并在滚动停止时关注相关元素。如果页面根本不需要滚动，因此在您执行滚动检查时没有滚动，您可以简单地关注元素。其他 S.O.问题有更多关于如何检查窗口滚动的信息。例如stackoverflow.com/questions/12522807/…
只需将preventScroll 选项传递给focus()。