如何检测鼠标相对于页面中点的相对位置坐标？

你需要的自定义positionX是鼠标水平位置相对页面水平中点的偏移量，通过以下逻辑计算即可实现：

• 先计算页面/视口的水平中点坐标
• 用鼠标实时水平坐标减去中点值，按需取绝对值即可

完整实现代码 #

// 监听鼠标移动事件
document.addEventListener('mousemove', e => {
  // 计算当前视口水平中点，若需要取整个文档的中点可替换为 document.body.scrollWidth / 2
  const centerX = window.innerWidth / 2
  // 计算相对偏移，需要区分左右方向就去掉Math.abs()，左侧为负右侧为正
  const positionX = Math.abs(e.clientX - centerX)
  // 打印结果
  console.log('positionX:', positionX)
})

效果验证 #

• 鼠标放在视口水平中点位置时，positionX输出为0
• 鼠标向左/向右每移动1px，positionX数值对应增加1

补充说明 #

• 上述代码每次鼠标移动时都会重新计算中点，窗口缩放后也能自动适配新的中点位置，无需额外处理
• 如果你需要的是相对整个页面（而非当前可见视口）的中点，把window.innerWidth替换为document.documentElement.scrollWidth即可

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