Добавить класс во время скролла
Здравствуйте. Есть кастомный курсор к которому добавляется класс в определенном блоке. Проблема в том, что не могу отследить событие мыши во время скролла колесиком. Событие 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
})
}
|
Надо ловить события 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>
|
изменение курсора над блоком
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>
|
Спасибо большое, ваш вариант работает, однако при загрузке страницы если двигать курсором, то сразу добавляются и удаляются классы к курсору и body, до тех пор пока я не сделаю скролл колесом. После чего всё работает нормально, не считая того, что у body остаётся класс cursnone. Тут на сайте всё хорошо, буду думать
|
или так )))
<!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>
|
Спасибо)
|
Заметил, что в вашем примере класс добавляется при наведении на стандартный скролл. Как я понял это происходит из за clientX. Можно ли чем то его заменить?
|
sega1821,
не понимаю. |
Справа есть сайтбар. Если на него навестись, то появляется курсор, такой же как в красном блоке.
Цитата:
|
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.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);
elem = elem && elem.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>
|
| Часовой пояс GMT +3, время: 19:22. |