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

Question

[Undefined User]

Нужно сделать поэкранную прокрутку на сайте.

<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 к блоку, куда идет прокрутка и отбирать его у данного блока?

Comments

[Dymok]

https://ru.stackoverflow.com/questions/486264/%D0%...

Как отслеживать прокрутку вверх и вниз по отдельности?

Answer 1

[Роман]

Если простенько - то так.

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);
});

Comments

[Undefined User]

Огромное спасибо

Answer 2

[Сергей]

Если правильно понял, то:
Можно попробовать так https://jsfiddle.net/Sergey_N/mnqy5b20/108/

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