Надо ловить события scroll и пересчитывать координаты курсора
До ума доводить лень, но что то такое
<head>
<style>
body{ padding:400px 0 1000px;}
body *{cursor:none!important}
.hover-block{
width:100%;
height:400px;
background-color:red;
}
#cursor{position:absolute;}
#cursor.is-slider{
z-index:100000;
pointer-events:none;
border-radius:50%;
background:green;
opacity:.75;
width:30px;
height:30px;
margin:-15px 0 0 -15px;
background-repeat:no-repeat;
background-size:100% 100%
}
</style>
</head>
<body>
<div class="hover-block"></div>
<div id="cursor"></div>
<script>
function customCursor(e) {
const cursor = document.querySelector('#cursor')
const hoverblock = document.querySelector('.hover-block')
let {top, bottom} = hoverblock.getBoundingClientRect()
let x0, y0;
let st0 = document.body.scrollTop;
top += st0;
bottom += st0;
console.log('customCursor', top, bottom, st0);
document.addEventListener('mousemove', e => {
const target = e.target
const diff = 2
x0 = e.pageX;
y0 = e.pageY;
st0 = document.body.scrollTop;
cursor.classList.remove('is-hide')
// cursor.style.opacity = 1
cursor.style.left = x0 + 'px'
cursor.style.top = y0 + 'px'
if (top<= y0 && y0 <= bottom) {
cursor.classList.add('is-slider')
document.body.classList.add('cursnone');
}
else {
document.body.classList.remove('cursnone');
cursor.classList.remove('is-slider')
}
})
document.addEventListener('scroll', e => {
const st = document.body.scrollTop;
d = st - st0;
y0 += d;
st0 = st;
cursor.style.left = x0 + 'px'
cursor.style.top = y0 + 'px'
if (top<= y0 && y0 <= bottom) {
cursor.classList.add('is-slider')
document.body.classList.add('cursnone');
}
else {
document.body.classList.remove('cursnone');
cursor.classList.remove('is-slider')
}
})
}
customCursor()
</script>
</body>