如何让未被垂直ScrollView遮挡的水平ScrollView可触摸？

核心问题在于带淡出效果的垂直ScrollView会拦截整个容器区域的触摸事件，哪怕内容没覆盖到水平ScrollView的部分也会被挡住。之前的overflow:visible只解决了内容溢出显示的问题，但没改变ScrollView本身的触摸拦截范围。下面给几个可行的解决思路：

1. 利用pointerEvents精准控制触摸响应 #

给垂直ScrollView设置pointerEvents="box-none"，同时给它的内容容器设置pointerEvents="auto"：

<ScrollView
  style={styles.verticalScroll}
  pointerEvents="box-none"
>
  <View pointerEvents="auto" style={styles.cardContainer}>
    {/* 你的橙色卡片内容 */}
  </View>
</ScrollView>

box-none会让垂直ScrollView本身不拦截任何触摸事件，但它的子元素（橙色卡片）依然可以正常响应触摸和滚动。这样水平ScrollView在没有被橙色卡片覆盖的区域就能正常接收触摸事件，覆盖区域则由垂直ScrollView的内容处理。

如果你的淡出效果是通过独立的遮罩层实现的，记得给遮罩层也加上pointerEvents="none"，避免遮罩挡住触摸：

<Animated.View style={fadeMaskStyle} pointerEvents="none">
  {/* 淡出遮罩内容 */}
</Animated.View>

2. 自定义触摸区域判断 #

如果上面的方案不满足需求，可以通过监听触摸事件，判断点击位置是否在垂直ScrollView的内容范围内，再决定是否让垂直ScrollView响应：

// 先获取垂直内容容器的布局信息
const [cardRect, setCardRect] = useState({ x: 0, y: 0, width: 0, height: 0 });
const cardRef = useRef(null);

useEffect(() => {
  cardRef.current?.measure((x, y, width, height) => {
    setCardRect({ x, y, width, height });
  });
}, []);

// 在垂直ScrollView的父容器上监听触摸事件
const handleTouchStart = (e) => {
  const { pageX, pageY } = e.nativeEvent;
  // 判断触摸点是否在橙色卡片范围内
  const isTouchOnCard = pageX >= cardRect.x && pageX <= cardRect.x + cardRect.width &&
                        pageY >= cardRect.y && pageY <= cardRect.y + cardRect.height;
  // 只有触摸在卡片上时，才让垂直ScrollView响应触摸，否则透传
  verticalScrollRef.current.setNativeProps({ pointerEvents: isTouchOnCard ? 'auto' : 'none' });
};

return (
  <View onTouchStart={handleTouchStart}>
    <ScrollView ref={verticalScrollRef} style={styles.verticalScroll}>
      <View ref={cardRef} style={styles.cardContainer}>
        {/* 橙色卡片内容 */}
      </View>
    </ScrollView>
  </View>
);

这个方案更灵活，适合复杂布局场景，但需要额外处理布局测量和触摸坐标的判断。

3. 分离滚动层与淡出层 #

调整布局结构，把垂直ScrollView的内容和淡出效果拆分开：让垂直ScrollView只负责滚动内容，设置overflow:visible；淡出遮罩作为独立的视图层，放在ScrollView上方但不拦截触摸。这样垂直ScrollView的触摸区域只限于内容本身，不会挡住水平ScrollView的未覆盖区域。

<View style={styles.container}>
  {/* 水平ScrollView */}
  <ScrollView horizontal style={styles.horizontalScroll}>
    {/* 绿色卡片内容 */}
  </ScrollView>
  
  {/* 垂直ScrollView只负责内容滚动，overflow设为visible */}
  <ScrollView style={[styles.verticalScroll, { overflow: 'visible' }]}>
    <View style={styles.cardContainer}>
      {/* 橙色卡片内容 */}
    </View>
  </ScrollView>
  
  {/* 淡出遮罩层，不拦截触摸 */}
  <Animated.View style={styles.fadeMask} pointerEvents="none" />
</View>

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