React自定义useRef滚动辅助函数中behavior:'smooth'无效问题排查与解决请求

我一眼就发现问题出在你写的left: ref.current.scrollLeft -= 500这行代码上——这个写法犯了一个容易忽略的小错误：你在这里直接用-=修改了元素的scrollLeft属性，这会让元素瞬间滚动到新位置，之后再调用scrollTo的时候，其实是在滚动到已经到达的位置，自然看不到平滑滚动的效果。

修复方案 #

你需要先计算出目标滚动位置，而不是直接修改当前的scrollLeft值。修改后的代码如下：

import { useRef, useEffect } from 'react';

const YourComponent = () => {
  const scrollRef = useRef(); 

  const handleScroll = (ref) => { 
    // 先做安全校验，避免ref还未挂载的情况
    if (!ref.current) return;
    
    // 计算目标滚动位置：当前滚动位置向左移动500px
    const targetLeft = ref.current.scrollLeft - 500;
    // 调用scrollTo传入目标位置和平滑行为
    ref.current.scrollTo({ 
      left: targetLeft, 
      behavior: 'smooth' 
    });
  };

  // 示例：在组件挂载后执行滚动
  useEffect(() => {
    handleScroll(scrollRef);
  }, []);

  return (
    <div ref={scrollRef} style={{ overflowX: 'auto', width: '300px' }}>
      {/* 你的滚动内容 */}
      <div style={{ width: '1000px' }}>滚动测试内容</div>
    </div>
  );
};

export default YourComponent;

关键说明 #

原来的写法中，ref.current.scrollLeft -= 500是一个赋值操作，它会直接修改DOM元素的scrollLeft，让元素瞬间完成滚动。而修复后的代码是先读取当前scrollLeft值，计算出目标位置，再把这个目标位置传给scrollTo方法，这样浏览器就能识别出需要从当前位置平滑过渡到目标位置，behavior: 'smooth'也就正常生效了。

额外注意点：

• 确保调用handleScroll时，scrollRef.current已经指向了真实的DOM元素（比如放在useEffect里，或者用户触发的点击事件中），避免出现null报错。
• 如果你的滚动容器是window对象，逻辑也是类似的，只是把ref.current换成window即可。

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