嵌套ScrollView子组件滚动至顶部/底部时父组件联动滚动的实现问题

核心逻辑 #

通过监听子ScrollView的滚动位置判断是否到达上下边界，动态切换子ScrollView的可滚动状态：

• 子ScrollView未到边界时，允许子滚动，父ScrollView不响应滑动
• 子ScrollView滚动到顶/底边界时，禁用子滚动权限，滑动事件自动透传给父ScrollView承接
• 用户再次触摸子ScrollView区域时，重新恢复子的滚动权限，循环执行上述判断

完整修改代码 #

import { useRef, useState } from 'react';
import { View, ScrollView, StyleSheet, StatusBar, Text } from 'react-native';

export default function App() {
  // 父ScrollView引用
  const parentScrollRef = useRef(null);
  // 三个子ScrollView的可滚动状态，下标对应三个子组件
  const [childScrollEnabled, setChildScrollEnabled] = useState([true, true, true]);

  // 子ScrollView滚动监听
  const handleChildScroll = (e, index) => {
    const { contentOffset, contentSize, layoutMeasurement } = e.nativeEvent;
    // 判断是否到达顶部或底部
    const isReachTop = contentOffset.y <= 0;
    const isReachBottom = contentOffset.y >= (contentSize.height - layoutMeasurement.height);
    
    if (isReachTop || isReachBottom) {
      // 到达边界，禁用当前子滚动，事件透传给父
      const newState = [...childScrollEnabled];
      newState[index] = false;
      setChildScrollEnabled(newState);
    }
  };

  // 触摸子ScrollView时恢复滚动权限
  const handleChildTouchStart = (index) => {
    const newState = [...childScrollEnabled];
    newState[index] = true;
    setChildScrollEnabled(newState);
  };

  return (
    <View style={{ flex: 1 }}>
      <ScrollView ref={parentScrollRef} style={{ flex: 1, backgroundColor: "white" }}>
        <View style={styles.dummyView1}>
          <ScrollView 
            style={styles.scrollView}
            scrollEnabled={childScrollEnabled[0]}
            onScroll={(e) => handleChildScroll(e, 0)}
            onTouchStart={() => handleChildTouchStart(0)}
            scrollEventThrottle={16}
            bounces={false} // 禁用边界弹动避免误判，iOS建议开启
          >
            {/* 替换为实际长文本内容 */}
            <View style={{height: 800, padding: 20}}><Text>SOME LONG TEXT</Text></View>
          </ScrollView>
        </View>

        <View style={styles.dummyView2}>
          <ScrollView 
            style={styles.scrollView}
            scrollEnabled={childScrollEnabled[1]}
            onScroll={(e) => handleChildScroll(e, 1)}
            onTouchStart={() => handleChildTouchStart(1)}
            scrollEventThrottle={16}
            bounces={false}
          >
            <View style={{height: 800, padding: 20}}><Text>SOME LONG TEXT</Text></View>
          </ScrollView>
        </View>

        <View style={styles.dummyView3}>
          <ScrollView 
            style={styles.scrollView}
            scrollEnabled={childScrollEnabled[2]}
            onScroll={(e) => handleChildScroll(e, 2)}
            onTouchStart={() => handleChildTouchStart(2)}
            scrollEventThrottle={16}
            bounces={false}
          >
            <View style={{height: 800, padding: 20}}><Text>SOME LONG TEXT</Text></View>
          </ScrollView>
        </View>

        <StatusBar style="auto" />
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  scrollView: {
    margin: 10,
    backgroundColor: "#FF5733",
  },
  dummyView1: {
    height: 300,
    backgroundColor: "#3352FF",
  },
  dummyView2: {
    height: 300,
    backgroundColor: "coral",
  },
  dummyView3: {
    height: 300,
    backgroundColor: "#61FF33",
  }
})

注意事项 #

• 子ScrollView内部的内容高度必须大于子ScrollView本身的高度，滚动判断逻辑才会生效
• 若不需要iOS的弹性滚动效果，建议保留bounces={false}属性，避免边界弹动时触发边界判断逻辑导致滚动异常
• scrollEventThrottle={16}是为了保证滚动事件每秒触发60次，和屏幕刷新率对齐，避免判断延迟出现卡顿

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