@rabodis

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

Когда пользователь наводит мышкой на блок 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);
  • Вопрос задан
  • 57 просмотров
Решения вопроса 1
@GovnoKoder_ITS
Мне 16 лет, начинающий front-end разработчик
Вот тебе функция, которая вычисляет координаты относительно документа:
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 подставляешь координаты своего блока
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы