React Native中如何让ScrollView在指定位置停止滚动且可恢复

直接通过scrollEnabled切换禁用/启用滚动的方式，会因为滚动惯性导致ScrollView冲过目标位置，而且禁用后无法继续滚动，完全不符合需求。下面提供两种可行的实现方案：

方案一：监听滚动位置，手动定位到目标点 #

通过监听滚动事件，在到达目标位置时调用scrollTo将ScrollView固定到指定位置，同时保持滚动功能始终可用，后续仍能继续滚动。

import { useState } from 'react';
import { ScrollView } from 'react-native';

const ControlledScrollView = () => {
  // 标记是否已在目标位置触发过停止
  const [hasStoppedAtTarget, setHasStoppedAtTarget] = useState(false);
  // 目标停止位置
  const TARGET_Y = 500;

  const handleScroll = (e) => {
    const currentY = e.nativeEvent.contentOffset.y;
    
    // 滚动超过目标位置且未触发过停止时，定位到目标点
    if (currentY >= TARGET_Y && !hasStoppedAtTarget) {
      e.target.scrollTo({ y: TARGET_Y, animated: true });
      setHasStoppedAtTarget(true);
    }
    
    // 当用户回滚离开目标位置时，重置标记，允许再次触发停止（可选，按需调整）
    if (currentY < TARGET_Y && hasStoppedAtTarget) {
      setHasStoppedAtTarget(false);
    }
  };

  return (
    <ScrollView
      onScroll={handleScroll}
      scrollEventThrottle={16} // 保证滚动事件触发频率，避免延迟
      scrollEnabled={true} // 始终允许滚动
    >
      {/* 这里放置你的滚动内容 */}
    </ScrollView>
  );
};

export default ControlledScrollView;

说明 #

• scrollEventThrottle设置为16（对应60fps），确保滚动事件及时触发，不会因为延迟导致错过目标位置。
• 状态hasStoppedAtTarget用于避免重复调用scrollTo，防止滚动抖动。如果只需要第一次到达目标时停止，可以去掉重置状态的逻辑。

方案二：使用Animated.ScrollView实现平滑停止 #

借助Animated库跟踪滚动位置，到达目标点时直接修正动画值，实现更平滑的停止效果，同时保留后续滚动能力。

import { useState, useRef } from 'react';
import { Animated, ScrollView } from 'react-native';

const AnimatedControlledScroll = () => {
  const scrollY = useRef(new Animated.Value(0)).current;
  const [hasStopped, setHasStopped] = useState(false);
  const TARGET_Y = 500;

  const handleScroll = Animated.event(
    [{ nativeEvent: { contentOffset: { y: scrollY } } }],
    {
      useNativeDriver: false,
      listener: (e) => {
        const currentY = e.nativeEvent.contentOffset.y;
        if (currentY >= TARGET_Y && !hasStopped) {
          // 直接设置动画值到目标位置，实现平滑停止
          scrollY.setValue(TARGET_Y);
          setHasStopped(true);
        }
        // 回滚离开目标位置时重置标记（可选）
        if (currentY < TARGET_Y && hasStopped) {
          setHasStopped(false);
        }
      },
    }
  );

  return (
    <Animated.ScrollView
      onScroll={handleScroll}
      scrollEventThrottle={16}
      scrollEnabled={true}
    >
      {/* 这里放置你的滚动内容 */}
    </Animated.ScrollView>
  );
};

export default AnimatedControlledScroll;

说明 #

• 利用Animated.Value实时跟踪滚动位置，修正时的过渡更自然，避免生硬的定位跳转。
• 如果需要处理横向滚动，只需将代码中的y替换为x即可。

内容的提问来源于stack exchange，提问作者Cosimo Giovanni Negri