如何让onMomentumScrollEnd仅响应触摸交互而非scrollTo方法？

我完全懂你的困扰——手动调用scrollTo时不小心触发了onMomentumScrollEnd，而你只想让这个事件响应用户触摸交互带来的滚动结束，而且还得拿到滚动最终停下的位置，onScrollEndDrag确实满足不了这个需求，因为它只能拿到拖拽松手瞬间的位置，拿不到惯性滑动后的终点。

给你一个简单可靠的解决方案：用一个状态标记位来区分「用户触摸发起的滚动」和「代码调用的滚动」，具体步骤如下：

实现思路 #

1. 定义一个布尔状态，比如isUserInitiatedScroll，用来标记当前滚动是否由用户触摸触发。
2. 在用户开始触摸拖拽ScrollView时（onScrollBeginDrag事件），把标记位设为true。
3. 在onMomentumScrollEnd事件里，先判断标记位是否为true：如果是，就执行你需要的逻辑（比如获取最终位置），然后重置标记位；如果不是，直接忽略。
4. 当你手动调用scrollTo前，先把标记位设为false，这样即使scrollTo触发了onMomentumScrollEnd，也不会执行你的业务逻辑。

完整代码示例（React Native） #

import React, { useState, useRef } from 'react';
import { ScrollView, Button, View, Text } from 'react-native';

const CustomScrollView = () => {
  // 标记当前是否为用户触摸发起的滚动
  const [isUserInitiatedScroll, setIsUserInitiatedScroll] = useState(false);
  const scrollViewRef = useRef(null);

  // 用户开始触摸拖拽时，标记为用户发起的滚动
  const handleScrollBeginDrag = () => {
    setIsUserInitiatedScroll(true);
  };

  // 惯性滚动结束时，只处理用户发起的滚动
  const handleMomentumScrollEnd = (event) => {
    if (isUserInitiatedScroll) {
      // 这里拿到滚动停止后的最终位置
      const finalOffset = event.nativeEvent.contentOffset;
      console.log('用户触摸滚动停止，最终位置：', finalOffset.x, finalOffset.y);
      // 重置标记位，避免影响下一次滚动
      setIsUserInitiatedScroll(false);
    }
  };

  // 补充：处理无惯性的滚动情况（用户拖拽后立即停下）
  const handleScrollEndDrag = (event) => {
    if (isUserInitiatedScroll) {
      const { velocity, contentOffset } = event.nativeEvent;
      // 速度为0表示没有惯性滚动，此时的位置就是最终位置
      if (velocity.x === 0 && velocity.y === 0) {
        console.log('用户触摸滚动停止（无惯性），最终位置：', contentOffset.x, contentOffset.y);
        setIsUserInitiatedScroll(false);
      }
    }
  };

  // 手动调用scrollTo的方法
  const scrollToTop = () => {
    // 先标记为非用户发起的滚动
    setIsUserInitiatedScroll(false);
    scrollViewRef.current?.scrollTo({ y: 0, animated: true });
  };

  return (
    <View style={{ flex: 1 }}>
      <Button title="回到顶部" onPress={scrollToTop} />
      <ScrollView
        ref={scrollViewRef}
        onScrollBeginDrag={handleScrollBeginDrag}
        onMomentumScrollEnd={handleMomentumScrollEnd}
        onScrollEndDrag={handleScrollEndDrag}
        style={{ flex: 1 }}
      >
        {/* 模拟长内容 */}
        {Array.from({ length: 50 }).map((_, idx) => (
          <Text key={idx} style={{ padding: 20, fontSize: 18 }}>
            列表项 {idx + 1}
          </Text>
        ))}
      </ScrollView>
    </View>
  );
};

export default CustomScrollView;

为什么这个方案有效？ #

• 用户触摸滚动时，一定会先触发onScrollBeginDrag，把标记位设为true，后续的onMomentumScrollEnd（或无惯性时的onScrollEndDrag）就会执行你的逻辑。
• 手动调用scrollTo时，不会触发onScrollBeginDrag，而且我们提前把标记位设为false，所以onMomentumScrollEnd会直接跳过逻辑执行，完美区分两种场景。

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