React移动端表单Div滚动异常问题求助

问题场景 #

移动端React表单中，多层fixed定位容器内的.formPageContent滚动Div存在滚动偶尔失效的问题，且问题多发生在填写输入框后点击屏幕其他区域时。

可能原因 #

1. 多层fixed定位冲突：.app、.formHolder、.formPageContent均设置position: fixed，导致浏览器无法正确识别滚动容器上下文，滚动事件被干扰或拦截。
2. 软键盘视口变化：移动端软键盘弹出/收起时视口高度改变，fixed定位的滚动容器top/bottom值基于初始视口计算，导致实际可滚动区域偏移或被挤压。
3. 浏览器默认行为干扰：部分移动端浏览器在输入框失焦后会自动滚动页面到顶部，破坏fixed容器的滚动状态。

解决方案 #

方案1：简化定位结构，减少fixed嵌套 #

只保留最外层容器的fixed定位，内层改为相对/绝对定位，明确滚动容器的上下文：

/* 修改.formHolder和.formPageContent的定位 */
.formHolder {
  color: white;
  width: 100%;
  position: relative;
  height: 100vh; /* 确保占满视口高度 */
}

.formPageContent {
  width: 100%;
  overflow-y: scroll;
  position: absolute;
  bottom: 90px;
  top: 90px;
  z-index: 100;
  -webkit-overflow-scrolling: touch; /* 优化移动端滚动流畅度 */
}

/* .app的样式保留原有fixed设置 */

方案2：监听视口变化，强制重绘滚动容器 #

通过监听窗口尺寸变化，在软键盘弹出/收起后强制滚动容器重绘，修正尺寸计算：

import { useEffect, useRef } from 'react';

function YourFormComponent() {
  const contentRef = useRef(null);

  useEffect(() => {
    const handleResize = () => {
      if (!contentRef.current) return;
      // 触发重排重绘，修正滚动容器尺寸
      contentRef.current.style.display = 'none';
      void contentRef.current.offsetHeight;
      contentRef.current.style.display = '';
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return (
    <div className={style.app}>
      <div className={style.formHolder}>
        <form onSubmit={(e) => handleSubmit(e)}>
          <div className={style.formPageContent} ref={contentRef}>
            {/* 输入框等表单内容 */}
            <input />
            <input />
            {/* ...更多输入框 */}
          </div>
        </form>
      </div>
    </div>
  );
}

方案3：拦截输入框失焦后的默认滚动行为 #

阻止浏览器在输入框失焦时的自动滚动，避免破坏fixed容器的滚动状态：

const handleInputBlur = () => {
  // 临时锁定页面滚动
  document.body.style.overflow = 'hidden';
  setTimeout(() => {
    document.body.style.overflow = '';
  }, 100);
};

// 在输入框上绑定失焦事件
<input onBlur={handleInputBlur} />

总结 #

优先尝试方案1，简化定位结构是解决多层fixed滚动冲突的最根本方法；若因业务限制无法修改定位结构，可结合方案2和方案3进行适配优化，同时添加-webkit-overflow-scrolling: touch提升移动端滚动体验。

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