React Native中如何实现两个ScrollView无延迟同步滚动？

你之前的实现出现同步延迟，本质是三个问题：

• 未配置scrollEventThrottle：ScrollView默认对滚动事件做了较大节流，不会每帧触发回调，自然会出现滚动差
• 逻辑跑在JS线程：onScroll回调、scrollTo调用都要经过JS桥通信，只要JS线程被其他任务（渲染、逻辑计算）占用，就会出现排队延迟
• 未做循环触发防护：如果给两个ScrollView都绑同步逻辑，会出现A滚触发B滚、B滚又触发A滚的死循环，还会加重卡顿

不需要额外引入依赖，补全配置就能满足大部分普通场景的同步需求：

1. 给两个ScrollView都加scrollEventThrottle={16}，对应60Hz屏幕每帧触发一次滚动事件，和屏幕刷新频率对齐
2. 加简单的锁标记，避免双向同步时的循环触发
3. 双向绑定滚动事件，保证任意一个滚动都能触发另一个同步

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

const Page = () => {
    const scroll_ref_1 = useRef(null);
    const scroll_ref_2 = useRef(null);
    // 滚动锁，标记当前主动滚动的实例，避免循环触发
    let activeScroll = null;

    return (
        <SafeAreaView>
            <ScrollView
                ref={scroll_ref_1}
                horizontal
                scrollEventThrottle={16}
                onScroll={e => {
                    if (activeScroll === scroll_ref_2) return;
                    activeScroll = scroll_ref_1;
                    const offsetX = e.nativeEvent.contentOffset.x;
                    scroll_ref_2.current?.scrollTo({
                        x: offsetX,
                        animated: false,
                    });
                    requestAnimationFrame(() => {
                        activeScroll = null;
                    });
                }}
            >
                {/* 滚动内容 */}
            </ScrollView>
            <ScrollView
                horizontal
                ref={scroll_ref_2}
                scrollEventThrottle={16}
                onScroll={e => {
                    if (activeScroll === scroll_ref_1) return;
                    activeScroll = scroll_ref_2;
                    const offsetX = e.nativeEvent.contentOffset.x;
                    scroll_ref_1.current?.scrollTo({
                        x: offsetX,
                        animated: false,
                    });
                    requestAnimationFrame(() => {
                        activeScroll = null;
                    });
                }}
            >
                {/* 滚动内容 */}
            </ScrollView>
        </SafeAreaView>
    );
};

这个方案的局限是所有逻辑还是走JS线程，如果页面有复杂动画、长列表等容易阻塞JS线程的场景，还是可能出现轻微的不同步。

如果要做到完全无感知的同帧同步，就把同步逻辑放到UI线程执行，完全绕开JS桥的通信开销，用react-native-reanimated就能实现：核心逻辑是用共享值在UI线程直接同步两个ScrollView的contentOffset，滚动事件捕获、偏移同步都在UI线程完成，哪怕JS线程完全卡住，两个ScrollView的滚动也能保持完全同步。

import Animated, { useAnimatedRef, useAnimatedScrollHandler, useSharedValue } from 'react-native-reanimated';
import { SafeAreaView } from 'react-native';

const Page = () => {
    const scrollRef1 = useAnimatedRef();
    const scrollRef2 = useAnimatedRef();
    const isSyncing = useSharedValue(false);

    const scrollHandler1 = useAnimatedScrollHandler({
        onScroll: (e) => {
            'worklet';
            if (isSyncing.value) return;
            isSyncing.value = true;
            const offsetX = e.contentOffset.x;
            scrollRef2.current?.scrollTo({ x: offsetX, animated: false });
            requestAnimationFrame(() => {
                isSyncing.value = false;
            });
        }
    });

    const scrollHandler2 = useAnimatedScrollHandler({
        onScroll: (e) => {
            'worklet';
            if (isSyncing.value) return;
            isSyncing.value = true;
            const offsetX = e.contentOffset.x;
            scrollRef1.current?.scrollTo({ x: offsetX, animated: false });
            requestAnimationFrame(() => {
                isSyncing.value = false;
            });
        }
    });

    return (
        <SafeAreaView>
            <Animated.ScrollView horizontal ref={scrollRef1} onScroll={scrollHandler1} scrollEventThrottle={16}>
                {/* 滚动内容 */}
            </Animated.ScrollView>
            <Animated.ScrollView horizontal ref={scrollRef2} onScroll={scrollHandler2} scrollEventThrottle={16}>
                {/* 滚动内容 */}
            </Animated.ScrollView>
        </SafeAreaView>
    )
}

• 同步滚动时scrollTo调用必须设置animated: false，开启动画会因为两个滚动的动画曲线、执行时机差出现明显错位
• 不要把scrollEventThrottle设得比16更小，过小的值会触发无意义的高频回调，反而增加性能开销，16刚好对应60fps的刷新间隔，120Hz高刷屏幕可以设为8匹配刷新率

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