Angular移动端键盘弹出时禁止自动滚动并自定义滚动位置

问题场景 #

开发调研表单时，移动端输入姓名后姓名会显示在页面顶部，但输入框聚焦弹出键盘时，浏览器会自动滚动页面，希望替换成自定义的滚动位置而非系统默认行为，现有尝试的几种滚动方法都没覆盖掉默认滚动。

可行解决方案 #

1. 延迟执行自定义滚动，覆盖默认行为 #

浏览器的自动滚动一般在输入框聚焦后、键盘弹出的间隙触发，给自定义滚动加个小延迟，就能覆盖掉默认动作：

修改模板，把click换成focus事件（更贴合输入框激活的时机）：

<input (focus)="onFocusInput()" placeholder="" class="form-control" formControlName="name" required>

调整方法，加setTimeout：

onFocusInput() {
  setTimeout(() => {
    window.scroll({
      top: 100,
      behavior: "smooth" // 要立即滚动就换成"auto"
    });
  }, 100); // 延迟时间可根据设备调整，50-200ms都试试
}

2. 阻止默认滚动+手动聚焦（适配部分顽固浏览器） #

有些浏览器的默认滚动无法被延迟覆盖，可以先阻止默认行为，再手动聚焦+滚动：

<input (focus)="onFocusInput($event)" placeholder="" class="form-control" formControlName="name" required>

onFocusInput(event: FocusEvent) {
  // 先阻止默认滚动行为
  event.preventDefault();
  
  setTimeout(() => {
    window.scroll({
      top: 100,
      behavior: "smooth"
    });
    // 手动聚焦输入框，因为preventDefault会打断默认聚焦
    (event.target as HTMLInputElement)?.focus();
  }, 50);
}

3. 监听视口变化，精准捕捉键盘弹出 #

移动端键盘弹出会缩小视口高度，用visualViewport监听变化，触发自定义滚动：

ngAfterViewInit() {
  if ('visualViewport' in window) {
    (window.visualViewport as VisualViewport).addEventListener('resize', () => {
      // 判断是否是键盘弹出（视口高度骤降）
      if (window.visualViewport.height < window.innerHeight * 0.8) {
        window.scroll({
          top: 100,
          behavior: "smooth"
        });
      }
    });
  }
}

4. CSS辅助禁用滚动锚定 #

浏览器有个滚动锚定机制，会自动保持元素可见，禁用它能减少干扰：

html, body {
  overflow-anchor: none;
}

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