Здравствуйте. Есть кастомный курсор к которому добавляется класс в определенном блоке. Проблема в том, что не могу отследить событие мыши во время скролла колесиком. Событие pointerover вроде как добавляет класс при скролле, а вот pointerleave удалить не может.
<body>
<div class="hover-block"></div>
<div id="cursor"></div>
</body>
body{ padding:400px 0 1000px;}
body *{cursor:none!important}
.hover-block{
width:100%;
height:400px;
background-color:red;
}
#cursor{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%
}
customCursor()
function customCursor(e) {
const cursor = document.querySelector('#cursor')
document.addEventListener('mousemove', e => {
const target = e.target
const diff = 2
const x = e.clientX
const y = e.clientY
cursor.classList.remove('is-hide')
// cursor.style.opacity = 1
cursor.style.left = x + 'px'
cursor.style.top = y + 'px'
if (target.closest('.hover-block')) {
cursor.classList.add('is-slider')
$('body').addClass('cursnone');
}
else {
$('body').removeClass('cursnone');
cursor.classList.remove('is-slider')
}
})
document.addEventListener('mouseout', e => {
cursor.classList.add('is-hide')
// cursor.style.opacity = 0
})
document.addEventListener('pointerover', e => {
cursor.classList.add('is-slider')
$('all').addClass('cursnone');
// cursor.style.opacity = 0
})
}