Angular2+中如何实现平滑滚动完成后再聚焦输入框

嘿，我太懂这个问题了！之前做Angular项目的时候也碰到过——本来好好的平滑滚动动画，一加上focus()直接就跳过去了，完全看不到滚动过程。这是因为浏览器的聚焦操作会强制把元素拉到视图里，直接打断了正在进行的平滑滚动。

别慌，咱们可以让滚动彻底完成之后再执行聚焦，下面给你两个实用的解决方案：

方案一：用requestAnimationFrame检测滚动停止 #

这个方法会持续检查滚动位置，直到连续两帧的位置不再变化，就说明滚动完成了，这时再触发聚焦。

首先在组件中获取目标输入框的引用：

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  @ViewChild('targetInput') targetInput!: ElementRef<HTMLInputElement>;

  async scrollToInputAndFocus() {
    const inputEl = this.targetInput.nativeElement;
    
    // 启动平滑滚动到目标元素，block: 'center'可以让元素居中显示
    inputEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
    
    // 等待滚动完全结束
    await this.waitForScrollFinish();
    
    // 滚动结束后为输入框设置焦点
    inputEl.focus();
  }

  private waitForScrollFinish(): Promise<void> {
    return new Promise(resolve => {
      let lastScrollPos = window.scrollY;
      
      const checkScrollEnd = () => {
        const currentScrollPos = window.scrollY;
        // 如果连续两帧的滚动位置一致，说明滚动已经停止
        if (currentScrollPos === lastScrollPos) {
          resolve();
        } else {
          lastScrollPos = currentScrollPos;
          // 在下一帧继续检查滚动状态
          requestAnimationFrame(checkScrollEnd);
        }
      };
      
      requestAnimationFrame(checkScrollEnd);
    });
  }
}

然后在模板中给输入框添加标记：

<input #targetInput type="text" placeholder="我是要聚焦的输入框">
<button (click)="scrollToInputAndFocus()">滚动并聚焦</button>

方案二：用RxJS监听滚动停止（更简洁） #

如果你的项目已经在使用RxJS，这个方法会更优雅——通过监听滚动事件，当一段时间内没有新的滚动事件时，判定滚动结束：

import { Component, ViewChild, ElementRef } from '@angular/core';
import { fromEvent, animationFrameScheduler } from 'rxjs';
import { auditTime } from 'rxjs/operators';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  @ViewChild('targetInput') targetInput!: ElementRef<HTMLInputElement>;

  scrollToInputAndFocus() {
    const inputEl = this.targetInput.nativeElement;
    inputEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
    
    this.waitForScrollFinish().then(() => {
      inputEl.focus();
    });
  }

  private waitForScrollFinish(): Promise<void> {
    return new Promise(resolve => {
      const scrollListener = fromEvent(window, 'scroll', { passive: true }).pipe(
        // 100ms内没有新的滚动事件才触发，用animationFrameScheduler保证在帧周期内执行
        auditTime(100, animationFrameScheduler)
      ).subscribe(() => {
        scrollListener.unsubscribe();
        resolve();
      });
    });
  }
}

额外注意事项 #

• 如果你的滚动容器不是整个窗口（比如是某个带滚动条的div），需要把代码中的window.scrollY替换为容器的scrollTop，同时监听容器的scroll事件。
• 若需要兼容旧浏览器（如IE），可以引入smoothscroll-polyfill来支持scrollIntoView的平滑滚动特性。

这样调整后，平滑滚动会完整执行完毕，再为输入框设置焦点，两者就不会再冲突了！

内容的提问来源于stack exchange，提问作者ahat91