sega1821,
как вариант ... на всякий случай, перед прокруткой, кликнуть по странице(макету).
(вопрос знатокам: куда курсор пропадает при прокрутке? )
<!DOCTYPE html>
<html>
<head>
<style>
body {
padding: 400px 0 1000px;
position: relative;
}
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 body = document.body;
let xMousePos = 0;
let yMousePos = 0;
let scrollTop = 0;
let scrollLeft = 0;
const toggle = e => {
if (e.type === 'scroll') {
scrollLeft -= window.pageXOffset;
xMousePos -= scrollLeft;
scrollLeft = window.pageXOffset;
scrollTop -= window.pageYOffset;
yMousePos -= scrollTop;
scrollTop = window.pageYOffset;
} else {
xMousePos = e.pageX;
yMousePos = e.pageY;
};
let clientX = xMousePos - scrollLeft , clientY = yMousePos - scrollTop;
let elem = document.elementFromPoint(clientX, clientY)?.closest('.hover-block');
cursor.classList.toggle('is-slider', elem);
body.classList.toggle('cursnone', !elem);
cursor.style.left = (xMousePos - 5) + 'px'
cursor.style.top = (yMousePos - 5) + 'px'
}
document.addEventListener('mousemove', toggle)
document.addEventListener('scroll', toggle)
}
customCursor()
</script>
</body>
</html>