页面滚动时图片上的CSS mask无法跟随鼠标移动的问题求助

问题出在你使用的坐标值上：event.clientX和event.clientY是鼠标相对于浏览器视口的坐标，当页面滚动时，.hole元素相对于视口的位置发生偏移，导致mask的定位和鼠标实际位置脱节。

只需要把坐标替换为相对于元素自身的偏移值即可解决，修改后的JavaScript代码如下：

window.onload = function() {
  const div = document.querySelector('.hole');
  let isIn = false;
  div.addEventListener('mouseover', function() {
    isIn = true;
  });
  div.addEventListener('mouseout', function() {
    isIn = false;
  });
  div.addEventListener('mousemove', function(event) {
    if (isIn) {
      div.style.setProperty('--x', event.offsetX + 'px');
      div.style.setProperty('--y', event.offsetY + 'px');
    }
  });
}

关键修改点 #

• 用event.offsetX/event.offsetY替代clientX/clientY：这两个值是鼠标相对于.hole元素内部的坐标，不受页面滚动影响，能精准对应元素内的鼠标位置
• 显式传入event参数：避免依赖全局event对象，提升代码兼容性和规范性

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