如何用useRef修改元素样式？鼠标控制容器移动报错求助

你直接给DOM元素的transform属性赋值是错误的，DOM元素的样式需要通过style对象来修改，而且translateX的参数必须带单位（比如px），否则样式不会生效。

修正后的handleMouseMove函数：

const handleMouseMove = (e) => {
  const x = e.clientX;
  console.log(x);
  // 通过style对象设置transform，补充px单位
  navTrack.current.style.transform = `translateX(${-x}px)`;
};

如果想让鼠标左移时容器右移的效果更自然，避免容器直接移出视野，可以根据容器和窗口的宽度做比例换算：

const handleMouseMove = (e) => {
  const x = e.clientX;
  const windowWidth = window.innerWidth;
  const trackWidth = navTrack.current.offsetWidth;
  // 计算容器最大可移动距离（避免完全移出窗口）
  const maxMoveDistance = trackWidth - windowWidth;
  // 按鼠标位置比例换算移动距离，让位移更贴合视觉逻辑
  const targetMoveX = (x / windowWidth) * maxMoveDistance;
  navTrack.current.style.transform = `translateX(${-targetMoveX}px)`;
};

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