React中如何通过useRef的scrollLeft实现平滑水平滚动？

直接修改scrollLeft属性无法触发平滑动画，原因是scroll-behavior: smooth CSS属性仅对通过导航操作、scrollTo/scrollBy方法或键盘触发的滚动生效，同步赋值scrollLeft属于直接修改DOM属性，不会触发浏览器的平滑滚动逻辑。

你可以把原有逻辑替换为使用scrollTo或scrollBy方法，这两个方法支持配置behavior: 'smooth'来实现平滑滚动：

方案一：使用scrollTo #

const scrollX = (direction = 'right') => {
  if (sliderRef.current) {
    const { clientWidth, scrollLeft } = sliderRef.current;
    const targetScrollLeft = direction === 'right' 
      ? scrollLeft + clientWidth 
      : scrollLeft - clientWidth;
    
    sliderRef.current.scrollTo({
      left: targetScrollLeft,
      behavior: 'smooth'
    });
  }
};

方案二：使用scrollBy（更简洁） #

const scrollX = (direction = 'right') => {
  if (sliderRef.current) {
    const scrollOffset = direction === 'right' 
      ? sliderRef.current.clientWidth 
      : -sliderRef.current.clientWidth;
    
    sliderRef.current.scrollBy({
      left: scrollOffset,
      behavior: 'smooth'
    });
  }
};

替换后点击滑块控制按钮就能得到你想要的平滑滚动效果，无需额外依赖第三方库，原生API即可实现。

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