React移动端如何在键盘弹出时将当前聚焦TextInput滚动到页面顶部

scrollIntoView偶发失效通常是两个原因导致：1. 调用时机早于系统键盘弹出、视口高度变更的节点，滚动完成后键盘弹出再次遮挡输入框；2. 未等待React状态更新、DOM渲染完成就触发滚动操作，目标元素位置还未稳定。
下面是可落地的稳定实现方案：

1. 基于VisualViewport API实现（兼容性覆盖95%以上移动端浏览器） #

通过监听系统视口变化，在键盘完全弹出、视口高度稳定后再触发滚动，从根源解决时机问题。
可以封装成自定义hooks全局复用：

import { useEffect, useRef } from 'react';

const useScrollFocusedInputToTop = () => {
  const focusedInputRef = useRef(null);

  useEffect(() => {
    // 全局监听输入框聚焦事件，记录当前聚焦的输入框
    const handleFocus = (e) => {
      if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
        focusedInputRef.current = e.target;
      }
    };
    window.addEventListener('focusin', handleFocus);

    // 监听视口变化（键盘弹出/收起会触发该事件）
    const handleViewportChange = () => {
      if (!focusedInputRef.current) return;
      // 延迟200ms确保键盘完全弹出，视口位置稳定后再滚动
      setTimeout(() => {
        focusedInputRef.current.scrollIntoView({
          behavior: 'smooth',
          block: 'start', // 对齐到视口顶部
          inline: 'nearest'
        });
        // 如需给顶部留安全间距，可增加以下代码自定义偏移量
        // window.scrollBy(0, -20); 
      }, 200);
    };
    window.visualViewport?.addEventListener('resize', handleViewportChange);

    return () => {
      window.removeEventListener('focusin', handleFocus);
      window.visualViewport?.removeEventListener('resize', handleViewportChange);
    };
  }, []);
};

2. 全局接入调用 #

在应用根组件引入hooks即可全局生效，不需要修改现有TextInput组件的代码：

function App() {
  useScrollFocusedInputToTop();
  // 其余应用逻辑
  return <div className="app">{/* 应用内容 */}</div>
}

3. 特殊场景兼容 #

如果使用了第三方自定义输入组件，或者页面存在固定顶部栏遮挡，可在对应输入框的onFocus事件中单独处理：

<TextInput
  onFocus={(e) => {
    setTimeout(() => {
      e.target.scrollIntoView({ block: 'start' });
    }, 250);
  }}
/>

注意：iOS Safari下不要使用position: fixed布局包裹输入框，fixed布局在键盘弹出时会出现位置偏移，导致滚动计算错误，建议改用flex或absolute布局实现固定定位效果。

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