ReactJS组件iPhone端列表无法向上滚动问题求助

问题根源 #

全局阻止window的touchmove默认行为会干扰iOS的原生滚动捕获机制——iOS需要先判断滚动方向和容器可滚动状态，再触发滚动事件。直接全局阻止会导致列表在边界位置（顶部/底部）的滚动方向判断失效，出现只能单向滚动的情况。

修复方案 #

不要全局禁用touchmove，而是仅在滚动容器无法继续滚动时，才阻止默认行为以避免背景滚动，同时开启iOS原生滚动优化。

代码实现（React组件） #

import { useEffect, useRef } from 'react';

const ScrollableList = ({ children, isReverse = false }) => {
  const listRef = useRef(null);
  let startY = 0;

  useEffect(() => {
    const handleTouchStart = (e) => {
      startY = e.touches[0].clientY;
    };

    const handleTouchMove = (e) => {
      const list = listRef.current;
      if (!list) return;

      const currentY = e.touches[0].clientY;
      const scrollTop = list.scrollTop;
      const scrollHeight = list.scrollHeight;
      const clientHeight = list.clientHeight;
      const isFingerMovingDown = currentY - startY > 0; // 手指向下滑动

      let canScrollInDirection;
      if (isReverse) {
        // 处理flex-direction: column-reverse的情况
        canScrollInDirection = isFingerMovingDown 
          ? scrollTop < scrollHeight - clientHeight // 手指向下滑，内容可向上滚动
          : scrollTop > 0; // 手指向上滑，内容可向下滚动
      } else {
        // 正常顺序的列表
        canScrollInDirection = isFingerMovingDown
          ? scrollTop > 0 // 手指向下滑，内容可向上滚动
          : scrollTop + clientHeight < scrollHeight; // 手指向上滑，内容可向下滚动
      }

      // 只有当容器无法向当前方向滚动时，才阻止默认行为（避免背景滚动）
      if (!canScrollInDirection) {
        e.preventDefault();
      }
    };

    const list = listRef.current;
    list.addEventListener('touchstart', handleTouchStart);
    // 必须设置passive: false，否则无法调用preventDefault
    list.addEventListener('touchmove', handleTouchMove, { passive: false });

    return () => {
      list.removeEventListener('touchstart', handleTouchStart);
      list.removeEventListener('touchmove', handleTouchMove);
    };
  }, [isReverse]);

  return (
    <div
      ref={listRef}
      style={{
        height: '100vh',
        overflowY: 'auto',
        flexDirection: isReverse ? 'column-reverse' : 'column',
        display: 'flex',
        // 开启iOS原生滚动优化，解决滚动卡顿/判断异常问题
        WebkitOverflowScrolling: 'touch',
      }}
    >
      {children}
    </div>
  );
};

export default ScrollableList;

关键注意事项 #

1. 移除全局touchmove阻止代码：删除所有类似window.addEventListener('touchmove', e => e.preventDefault())的全局监听
2. WebkitOverflowScrolling: 'touch'：必须开启这个属性，iOS依赖它实现流畅的原生滚动及滚动状态判断
3. 滚动方向判断逻辑：针对column-reverse的列表，需要反向判断滚动边界条件，确保双向滚动正常
4. passive: false：在touchmove事件监听中必须设置，否则无法调用preventDefault()

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