CSS/query mask over image doesn't follow the cursor on scroll-CodePudding

I am trying to get the mask to follow the mouse and it does until you scroll down the page. When you scroll, the mask is still there but it's not following the mouse.

I followed the 1st answer on this question for reference: here

Here is the website link so you can see what i have going on right now: website

i am very new at this btw

.datahover {
  cursor: url("http://inkndata.dggtest.com/wp-content/uploads/2023/01/Cursor_7.png") 45 40, auto!important;
}

.hole {
  background-image: url(http://inkndata.dggtest.com/wp-content/uploads/2023/01/inkNdata-BridgeCutout-Updated-scaled.jpg);
  background-size: cover;
  background-position: center top center;
  --x: 200px;
  --y: 150px;
  width: 100%;
  height: 50vw;
  position: relative;
}

.hole::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(http://inkndata.dggtest.com/wp-content/uploads/2023/01/inkNdata-BridgeCutout-front-image-scaled.jpg);
  background-size: cover;
  background-position: center top center;
  z-index: 1;
  -webkit-mask-repeat: no-repeat no-repeat;
  mask-repeat: no-repeat no-repeat;
  -webkit-mask-image: radial-gradient(70px at var(--x) var(--y), transparent 55%, black 100%);
  mask-image: radial-gradient(70px at var(--x) var(--y), transparent 55%, black 100%);
}

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() {
    if (isIn) {
      div.style.setProperty('--x', event.clientX   'px');
      div.style.setProperty('--y', event.clientY   'px');
    }
  });
}

CodePudding user response：

A possible solution could be use pageX and pageY properties instead.

Also you can use event.target to check if the mouse cursor is over the div.

Try:

window.onload = function() {
  var hole = document.querySelector('.hole');
  
  document.addEventListener('mousemove', function(event) {
    if(event.target === hole){
      hole.style.setProperty('--x', event.pageX   'px');
      hole.style.setProperty('--y', event.pageY   'px');
    }
  });
}