или так )))
<!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.fixed {
position: fixed;
}
#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;
const toggle = e => {
if (e.type === 'scroll') {
cursor.style.left = (xMousePos - 5) + 'px';
cursor.style.top = (yMousePos - 5) + 'px';
cursor.classList.add('fixed');
}
if (e.type === 'mousemove') {
cursor.classList.remove('fixed');
cursor.style.left = (e.pageX - 5) + 'px';
cursor.style.top = (e.pageY - 5) + 'px';
xMousePos = e.clientX;
yMousePos = e.clientY;
};
let elem = document.elementFromPoint(xMousePos, yMousePos)?.closest('.hover-block');
cursor.classList.toggle('is-slider', elem);
body.classList.toggle('cursnone', !elem);
}
document.addEventListener('mousemove', toggle)
document.addEventListener('scroll', toggle)
}
customCursor()
</script>
</body>
</html>