Задать вопрос

Как отследить событие скроллинга для поэкранной прокрутки?

Нужно сделать поэкранную прокрутку на сайте.
<div class="block home__block active">...</div>
<div class="block works__block">...</div>
<div class="block about__block">...</div>
<div class="block contact__block">...</div>
<div class="block hire__block">...</div>

Сайт состоит из 5 таких вот блоков. Блоки выводятся с изменением opacity и margin, то есть блок как бы уезжает и исчезает при переключении на другой блок. Это я уже сделал для переключения через nav. Как можно отследить скроллинг, чтобы добавлять класс active к блоку, куда идет прокрутка и отбирать его у данного блока?
  • Вопрос задан
  • 143 просмотра
Подписаться 2 Средний 1 комментарий
Решения вопроса 1
@DoktorB
Изучаю JS
Если простенько - то так.
const blocks = document.querySelectorAll('.block');

const scrollTo = (delta) => {
  for (let i = 0; i < blocks.length; i++) {
    const elem = blocks[i];
    elem.classList.remove('active');
    if (i == delta) {
      elem.classList.add('active');
    }
  }
}
let step = 0;
document.addEventListener('wheel', (e) => {
  if (e.deltaY < 0) {
    step -= 1;
    if (step <= 0) { step = 0}
  }
  if (e.deltaY > 0) {
    step += 1;
    if (step >= 5) { step = 4 }
  }
  console.log(step);
  scrollTo(step);
});
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@Sergey-Nag
Если правильно понял, то:
Можно попробовать так https://jsfiddle.net/Sergey_N/mnqy5b20/108/

Если нужны координаты, то как-то так. Но придется корректировать: правильно считать при каких координатах следует добавлять класс https://jsfiddle.net/Sergey_N/m2utwxen/20/
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы