视频编辑器中进度条触达屏幕边缘时如何滚动容器？

我开发了一款视频编辑器应用，核心逻辑是：将视频加载到时间轴（timeline）后点击播放，视频开始播放，进度条（tracker）沿视频容器移动；预期当进度条触达屏幕边缘时，视频容器自动向左移动，避免进度条移出视野。

当前实现代码如下：

const { currentPosition, setCurrentPosition } = useContext(EditorContext);
const scrollContainerRef = useRef<HTMLDivElement | null>(null);

useEffect(() => {
    const scrollContainer = scrollContainerRef.current;
   if (!scrollContainer) return;
    if (scrollContainer) {
      const rect = scrollContainer.getBoundingClientRect();
      const rightLimit = rect.width - 200;
      if (currentPosition > rightLimit) {
        scrollContainer.scrollBy({ left: 100, behavior: 'smooth' });
      }
    }
  }, [currentPosition]);

但实际运行存在问题：仅在暂停视频、进度条停止移动时，容器才会触发向左滚动，播放过程中无法实时跟随进度条调整位置。

问题原因 #

1. React状态更新合并机制：视频播放时currentPosition是连续变化的，但React会合并高频状态更新，导致依赖currentPosition的useEffect无法高频触发，滚动逻辑滞后。
2. 固定滚动量与平滑动画冲突：每次固定滚动100px的逻辑精度不足，且smooth滚动行为在高频触发时会出现动画叠加、响应不及时的问题。

解决方案 #

方案1：用requestAnimationFrame同步帧率监听滚动 #

将滚动逻辑与浏览器渲染帧率绑定，确保和视频播放进度实时同步：

const { currentPosition } = useContext(EditorContext);
const scrollContainerRef = useRef<HTMLDivElement | null>(null);
const animationFrameRef = useRef<number | null>(null);

useEffect(() => {
  const updateScroll = () => {
    const scrollContainer = scrollContainerRef.current;
    if (!scrollContainer) return;

    const rect = scrollContainer.getBoundingClientRect();
    // 计算进度条相对于容器可视区域的实时位置
    const trackerRelativePos = currentPosition - scrollContainer.scrollLeft;
    // 设置触发滚动的阈值（进度条距离右侧200px时启动滚动）
    const triggerThreshold = rect.width - 200;

    if (trackerRelativePos > triggerThreshold) {
      // 滚动量等于进度条超出阈值的部分，确保进度条始终处于可视区域内
      const scrollAmount = trackerRelativePos - triggerThreshold;
      scrollContainer.scrollLeft += scrollAmount;
    }
  };

  // 启动帧循环监听
  animationFrameRef.current = requestAnimationFrame(function loop() {
    updateScroll();
    animationFrameRef.current = requestAnimationFrame(loop);
  });

  // 组件卸载或视频暂停时取消监听
  return () => {
    if (animationFrameRef.current) {
      cancelAnimationFrame(animationFrameRef.current);
    }
  };
}, [currentPosition]);

方案2：优化currentPosition的更新频率 #

确保currentPosition与视频播放进度实时绑定，通过视频的timeupdate事件逐帧更新状态：

// 假设你有视频元素的ref
const videoRef = useRef<HTMLVideoElement | null>(null);
const { setCurrentPosition } = useContext(EditorContext);
const timelineScale = 100; // 示例：1秒对应100px的时间轴长度

useEffect(() => {
  const video = videoRef.current;
  if (!video) return;

  const handleTimeUpdate = () => {
    // 根据视频当前时间计算对应时间轴位置
    const position = video.currentTime * timelineScale;
    setCurrentPosition(position);
  };

  video.addEventListener('timeupdate', handleTimeUpdate);
  return () => {
    video.removeEventListener('timeupdate', handleTimeUpdate);
  };
}, [timelineScale, setCurrentPosition]);

关键优化点 #

• 用requestAnimationFrame对齐浏览器渲染帧率，避免React状态合并导致的滞后问题。
• 动态计算滚动量，替代固定值，确保进度条始终保持在可视区域内。
• 绑定视频timeupdate事件，保证currentPosition的更新频率与播放进度同步。

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