调整clamp值后鼠标跟随器无法移动问题求助

核心问题点 #

• 重复绑定鼠标移动事件：每次调用MouseFollower()都会给window新增一个mousemove监听，多次调用后事件叠加，导致元素行为混乱——这也是改回参数后仍异常的根本原因。
• CSS transform语法错误：translate和scale属性之间缺少逗号分隔，正确写法应为translate(...) scale(...)，原代码把scale写在了translate的参数内，导致定位完全错误。
• 差值处理逻辑错误：鼠标移动的差值xdiff/ydiff可能为负数，直接传入clamp会把负数强制拉到最小值0.8，缩放逻辑不符合预期，应该取差值的绝对值后再做限制。

修复后的代码 #

function circleChapta() {
  var timeout
  var xscale = 1
  var yscale = 1
  var xprev = 0
  var yprev = 0
  const circle = document.querySelector("#circleScroll")

  // 只绑定一次mousemove事件
  window.addEventListener("mousemove", function(dets) {
    clearTimeout(timeout);
    var xdiff = dets.clientX - xprev
    var ydiff = dets.clientY - yprev
    xprev = dets.clientX
    yprev = dets.clientY
    
    // 取差值绝对值后再clamp，确保缩放基于移动幅度
    xscale = gsap.utils.clamp(0.8, 1.2, Math.abs(xdiff))
    yscale = gsap.utils.clamp(0.8, 1.2, Math.abs(ydiff))

    // 直接更新元素transform，无需调用MouseFollower
    circle.style.transform = `translate(${dets.clientX}px, ${dets.clientY}px) scale(${xscale}, ${yscale})`

    timeout = setTimeout(function() {
      circle.style.transform = `translate(${dets.clientX}px, ${dets.clientY}px) scale(1, 1)`;
    }, 100)
  })
}
circleChapta();

修复说明 #

1. 移除了重复绑定事件的MouseFollower函数，直接在主事件监听内更新元素样式，避免事件叠加。
2. 修正了transform的语法错误，将translate和scale分开并添加逗号。
3. 对鼠标移动差值取绝对值后再传入clamp，确保缩放逻辑基于移动的幅度，而非方向。
4. 提前获取#circleScroll元素，避免每次事件触发都重复查询DOM，提升性能。

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