Javascript 在鼠标上使用“平滑滚动”时不起作用移动到React组件内部

我有一个代码示例，其中我尝试在鼠标移动时水平滚动元素。 下面是一个演示：

const-App=（）=>{
const propertythumbails=useRef（null）；
常量mX=useRef（0）；
常量mX2=useRef（0）；
const posX=useRef（0）；
const mPadd=60；//鼠标移动填充
const damp=20；//Mmusemove响应柔和度
常量handleMouseMove=e=>{
if（PropertyThumb钉子.current）{
const container=propertyThumbnails.current；
const parent=container.parentElement；
const galW=container.offsetWidth；
const galSW=容器的宽度；
const wDiff=galSW/galW-1；//宽度差比
const mmAA=galW-mPadd*2；//鼠标移动可用区域
const mmAAr=galW/mmAA；//获取可用的鼠标移动指令比率
如果（家长）{
电流=
e、 pageX-parent.getBoundingClientRect（）.left-container.offsetLeft；
mX2.current=Math.min（Math.max（0，mX.current-mPadd），mmAA）*mmAAr；
}
posX.current+=（mX2.current-posX.current）/damp；//泽诺悖论方程“捕捉延迟”
setInterval（函数（）{
posX.current+=（mX2.current-posX.current）/damp；//泽诺悖论方程“捕捉延迟”
container.scrollLeft=posX.current*wDiff；
}, 40);
}
};
返回(
1.
2.
3.
4.
4.
5.
6.
);
}
ReactDOM.render(

我试图理解为什么我的示例中的卷轴不像第二支笔上的卷轴那样平滑

我尝试使用scrollTo和“平滑”，但它也不起作用

如果您能帮我找到问题，我将不胜感激。
似乎我找到了问题。如果有人会遇到同样的问题，我将留下问题并发布答案：

问题是setInterval被放置在鼠标移动处理程序中，并且每次都被重置。所以解决方案是将setInterval逻辑放置到useEffect钩子中

const App = () => {
  const propertyThumbnails = useRef(null);

  const mX = useRef(0);
  const mX2 = useRef(0);
  const posX = useRef(0);
  const mPadd = 60; // mousemove Padding
  const damp = 20; // Mmusemove response softness
  

  const handleMouseMove = e => {
    
    if (propertyThumbnails.current) {
      const container = propertyThumbnails.current;
      const parent = container.parentElement;
      const galW = container.offsetWidth;
      const galSW = container.scrollWidth;
      const wDiff = galSW / galW - 1; // widths difference ratio
      const mmAA = galW - mPadd * 2; // the mousemove available area
      const mmAAr = galW / mmAA; // get available mousemove didderence ratio

      if (parent) {
        mX.current =
          e.pageX - parent.getBoundingClientRect().left - container.offsetLeft;

        mX2.current = Math.min(Math.max(0, mX.current - mPadd), mmAA) * mmAAr;
      }
      
      posX.current += (mX2.current - posX.current) / damp; // zeno's paradox equation "catching delay"

      setInterval(function () {
        posX.current += (mX2.current - posX.current) / damp; // zeno's paradox equation "catching delay"
        container.scrollLeft = posX.current * wDiff;
      }, 40);
    }
  };
  
  return(
    <div>
      <div className="empty"></div>
      <div className="parent" >
        <div className="listContainer" ref={propertyThumbnails} onMouseMove={handleMouseMove}>
          <div className="child">1</div>
          <div className="child">2</div>
          <div className="child">3</div>        
          <div className="child">4</div>
          <div className="child">4</div>
          <div className="child">5</div>
          <div className="child">6</div>
        </div>
      </div>
    </div>
  );
}

ReactDOM.render(<App />,
document.getElementById("root"))