鼠标悬停元素时图片跟随偏移，如何获取正确鼠标位置？

核心问题 #

1. 定位上下文缺失：[data-tail-wrap]和[data-tail-item]使用absolute定位，但父元素[data-tail-list]未设置position: relative，导致绝对定位元素的参考系不是当前list项，而是页面中最近的已定位祖先（无则为视口），直接引发后续元素的定位计算混乱。
2. 坐标系统混用：onMove函数中x轴用e.clientX（视口相对坐标），但y轴计算混合了e.pageY（文档相对坐标，包含滚动距离）和getBoundingClientRect().top（视口相对坐标），页面滚动时，这种混合会让y值偏差随元素距离顶部的距离同步增大。

修复步骤 #

1. 修正CSS定位

给.list（即[data-tail-list]）添加相对定位，让内部绝对定位元素以当前list为参考：

.list {
  position: relative;
}

2. 统一坐标计算逻辑

修改onMove函数，统一使用视口相对坐标计算，确保定位精准：

onMove(e) {
  const el = e.currentTarget.querySelector('[data-tail-item]')
  const listRect = e.currentTarget.getBoundingClientRect()
  const wrapHeight = e.currentTarget.querySelector('[data-tail-wrap]').offsetHeight
  
  gsap.to(el,{
    x: e.clientX - listRect.left,
    y: e.clientY - listRect.top - wrapHeight/2
  })
}

补充优化 #

• 把querySelectorAll替换为querySelector，每个list内只有一个目标元素，这样更高效。
• 如果需要基于文档坐标定位，可统一使用pageX/pageY，同时将元素的视口top转换为文档top：

onMove(e) {
  const el = e.currentTarget.querySelector('[data-tail-item]')
  const listDocTop = e.currentTarget.getBoundingClientRect().top + window.scrollY
  const wrapHeight = e.currentTarget.querySelector('[data-tail-wrap]').offsetHeight
  
  gsap.to(el,{
    x: e.pageX,
    y: e.pageY - listDocTop - wrapHeight/2
  })
}

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