ScrollView中scrollToEnd滚动结束后触发回调的实现咨询

官方ScrollView的scrollToEnd方法确实没有提供直接的完成回调，但可以通过以下两种可靠方式实现需求：

方法一：利用滚动结束事件判断 #

调用scrollToEnd({animated: true})时，滚动动画结束会触发onMomentumScrollEnd事件，我们可以在这个事件里校验当前滚动位置是否到达末尾，进而执行回调逻辑。

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

const App = () => {
  const scrollViewRef = useRef(null);
  const [isActiveScrollToEnd, setIsActiveScrollToEnd] = useState(false);

  const triggerScrollToEnd = () => {
    setIsActiveScrollToEnd(true);
    scrollViewRef.current?.scrollToEnd({ animated: true });
  };

  const handleScrollEnd = (event) => {
    if (!isActiveScrollToEnd) return;
    
    const { contentOffset, contentSize, layoutMeasurement } = event.nativeEvent;
    // 加10的误差阈值，避免精度问题导致判断失败
    const isAtBottom = contentOffset.y + layoutMeasurement.height >= contentSize.height - 10;
    
    if (isAtBottom) {
      // 这里写你需要执行的操作
      console.log('滚动到末尾，执行回调');
      setIsActiveScrollToEnd(false);
    }
  };

  return (
    <View style={{ flex: 1 }}>
      <Button title="滚动到末尾" onPress={triggerScrollToEnd} />
      <ScrollView
        ref={scrollViewRef}
        contentContainerStyle={{ flexGrow: 1, padding: 20 }}
        onMomentumScrollEnd={handleScrollEnd}
      >
        {/* 示例内容 */}
        {Array.from({ length: 50 }).map((_, index) => (
          <Text key={index} style={{ fontSize: 18, marginVertical: 10 }}>
            列表项 {index + 1}
          </Text>
        ))}
      </ScrollView>
    </View>
  );
};

export default App;

说明：用isActiveScrollToEnd状态标记是主动触发的滚动操作，避免用户手动滚动到末尾时误触发回调。

方法二：用Animated模块手动控制滚动 #

如果需要更精准的时机控制，可以直接用Animated模块创建滚动动画，在动画结束回调里执行操作。

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

const App = () => {
  const scrollViewRef = useRef(null);
  const scrollY = useRef(new Animated.Value(0)).current;

  const triggerScrollToEnd = () => {
    // 获取ScrollView可视高度和内容总高度
    scrollViewRef.current?.measure((_, __, ___, viewHeight) => {
      scrollViewRef.current?.getContentSize((_, contentHeight) => {
        const targetScrollY = contentHeight - viewHeight;
        // 创建和默认scrollToEnd一致时长的动画
        Animated.timing(scrollY, {
          toValue: targetScrollY,
          duration: 300,
          useNativeDriver: true,
        }).start(() => {
          // 动画结束后直接执行回调
          console.log('滚动到末尾，执行回调');
        });
      });
    });
  };

  return (
    <View style={{ flex: 1 }}>
      <Button title="滚动到末尾" onPress={triggerScrollToEnd} />
      <Animated.ScrollView
        ref={scrollViewRef}
        contentContainerStyle={{ flexGrow: 1, padding: 20 }}
        scrollEventThrottle={16}
        onScroll={Animated.event(
          [{ nativeEvent: { contentOffset: { y: scrollY } } }],
          { useNativeDriver: true }
        )}
      >
        {/* 示例内容 */}
        {Array.from({ length: 50 }).map((_, index) => (
          <Text key={index} style={{ fontSize: 18, marginVertical: 10 }}>
            列表项 {index + 1}
          </Text>
        ))}
      </Animated.ScrollView>
    </View>
  );
};

export default App;

说明：这种方式直接掌控动画生命周期，适合对回调时机要求严格的场景，动画时长可根据需求调整。

注意事项 #

• 如果调用scrollToEnd({animated: false})，无需等待动画，直接在调用后执行回调即可。
• 方法一中的误差阈值可根据实际布局调整，避免因像素精度问题导致判断失效。

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