Как отследить прокрутку вне блока на js?

Question

[rabodis]

Когда пользователь наводит мышкой на блок box, elem принимает класс active, но если в пределах этого блока начинать скролить страницу верх вниз, то класс элемента не изменяется. Подскажите, как отследить скролл за пределами блока, чтобы у элемента менялся класс, когда пользователь прокрутил страницу ниже или выше box?

<div class="box">
        <div class="elem active"></div>
</div>

.box{
    margin-top: 300px;
    width: 100%;
    height: 600px;
}

.elem{
    width: 100px;
    height: 120px;
    background: blue;
}

.active{
    background: red;
}

let parent = document.querySelector('.box'),
        element = document.querySelector('.elem'),
        k = parent.getBoundingClientRect();
        console.log(k);

Answer 1

[Сергей Волков]

Вот тебе функция, которая вычисляет координаты относительно документа:

const coordinateCalculation = (e) => {
    coordinateQuote = coordinateQuote.push((Math.floor(element.getBoundingClientRect().top + window.pageYOffset)) - window.screen.height); // Добавляет в массив координаты элемента относительно документа=

    return coordinateQuote;
}

Потом добавляешь событие скролла:

$(window).on('scroll', ( ) => {
    if(window.pageYOffset > 200) {

    } else if(window.pageYOffset < 200){

    }
})

p.s Здесь используется jquery.

Вместо 200 подставляешь координаты своего блока

Comments

[Сергей Волков]

Это функция находит координаты верхней точки элемента, Так что в функцию можешь добавить еще вот этот кусок кода:

coordinateQuote = coordinateQuote.push((Math.floor(e.getBoundingClientRect().bottom + window.pageYOffset)) - window.screen.height);

Тогда на выходе у тебя будет массив. В котором первое значение это координаты начала блока, а второе значение координаты конца блока