如何在iOS设备上禁用ReactJS输入框聚焦时的垂直居中滚动

iOS Safari有个内置行为：当输入框获得焦点时，会自动将元素滚动到视口垂直居中位置，这会打乱页面原有布局。针对这个问题，以下是几个经过验证的解决方案：

1. 延迟还原滚动位置 #

浏览器的自动滚动会在onFocus事件之后触发，所以可以通过延迟执行滚动还原操作来覆盖默认行为：

import { TextField } from '@mui/material';
import { useCallback } from 'react';

const InputComponent = () => {
  const handleFocus = useCallback(() => {
    // 记录当前滚动位置
    const currentScroll = {
      top: window.scrollY,
      left: window.scrollX
    };
    // 延迟执行，覆盖浏览器的自动滚动
    setTimeout(() => {
      window.scrollTo(currentScroll);
    }, 0);
  }, []);

  return <TextField onFocus={handleFocus} />;
};

如果setTimeout(0)不生效，可以尝试把延迟时间调到10-50ms，适配iOS的事件循环时机。

2. 使用固定容器接管滚动上下文 #

将页面内容放到一个固定定位的容器中，让容器内部负责滚动，而非整个视口。这种方法能从根源上避免iOS对全局视口的自动调整：

CSS 配置 #

.app-scroll-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow-y: auto;
  /* 保留iOS原生弹性滚动体验 */
  -webkit-overflow-scrolling: touch;
}

React 组件实现 #

import { TextField } from '@mui/material';
import { useRef, useCallback } from 'react';

const App = () => {
  const containerRef = useRef<HTMLDivElement>(null);

  const handleInputFocus = useCallback(() => {
    if (!containerRef.current) return;
    const scrollTop = containerRef.current.scrollTop;
    setTimeout(() => {
      containerRef.current!.scrollTop = scrollTop;
    }, 0);
  }, []);

  return (
    <div ref={containerRef} className="app-scroll-container">
      {/* 页面其他内容 */}
      <TextField onFocus={handleInputFocus} label="测试输入框" />
      {/* 更多输入框... */}
    </div>
  );
};

3. 辅助优化项 #

• 给输入框添加autocomplete="off"和autocorrect="off"，避免iOS自动填充行为触发额外滚动：

  <TextField 
    autocomplete="off" 
    autocorrect="off"
    onFocus={handleInputFocus}
  />
  

• 确保viewport元标签配置正确（你已经做过，但再确认）：

  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, user-scalable=no">
  

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