Форум

sega1821 · #1 (**permalink**) 26.12.2022, 02:34

Здравствуйте. Есть кастомный курсор к которому добавляется класс в определенном блоке. Проблема в том, что не могу отследить событие мыши во время скролла колесиком. Событие 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
    })  
}

voraa · #2 (**permalink**) 26.12.2022, 17:22

Надо ловить события 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>

рони · #3 (**permalink**) 26.12.2022, 20:12

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>

sega1821 · #4 (**permalink**) 26.12.2022, 20:50

Спасибо большое, ваш вариант работает, однако при загрузке страницы если двигать курсором, то сразу добавляются и удаляются классы к курсору и body, до тех пор пока я не сделаю скролл колесом. После чего всё работает нормально, не считая того, что у body остаётся класс cursnone. Тут на сайте всё хорошо, буду думать

рони · #5 (**permalink**) 26.12.2022, 20:50

или так )))

<!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>

sega1821 · #6 (**permalink**) 27.12.2022, 00:16

Спасибо)

sega1821 · #7 (**permalink**) 27.12.2022, 01:52

Заметил, что в вашем примере класс добавляется при наведении на стандартный скролл. Как я понял это происходит из за clientX. Можно ли чем то его заменить?

рони · #8 (**permalink**) 27.12.2022, 01:58

sega1821,
не понимаю.

sega1821 · #9 (**permalink**) 27.12.2022, 02:11

Справа есть сайтбар. Если на него навестись, то появляется курсор, такой же как в красном блоке.

Сообщение от рони

или так )))

<!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>

рони · #10 (**permalink**) 27.12.2022, 02:54

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>

Форум

Справочник

Discord чат

Курсы javascript