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

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

<nav class="side__nav">

          <div class="side__nav__line"></div>

          <ul class="side__nav__items" id="side__nav">
            <li class="item active" id="item1">01 Home</li>
            <li class="item" id="item2">02 Works</li>
            <li class="item" id="item3">03 About</li>
            <li class="item" id="item4">04 Contact</li>
            <li class="item" id="item5">05 <span class="no__spacing">Hire us</span></li>
          </ul>

        </nav>

Сайт состоит из 5 таких вот блоков и навбара. Блоки выводятся с изменением opacity и margin, то есть блок как бы уезжает и исчезает при переключении на другой блок. Это я уже сделал для переключения через nav. Как можно отследить скроллинг, чтобы добавлять класс active к блоку, куда идет прокрутка? Еще нужно, чтобы нажатие на item в навбаре также учитывалось, то есть если юзер нажимает на 3 кнопку, блок переключался на 3 и скроллинг начинался с 3 блока, а не с 1, потому что такой код у меня уже есть и мне он не особо нравится

А вот и этот код, пробовал его переделать, но не получается

const blocks = document.querySelectorAll('.block');
const items = document.querySelectorAll('.item');

let step = 0;

function scrollTo(delta) {
  for (let i = 0; i < blocks.length; i++) {
    const elem = blocks[i];
    const item = items[i];
    setTimeout(function() {
      elem.classList.remove('active');
    item.classList.remove('active');
    }, 150);
    if (i == delta) {
      setTimeout(function() {
        elem.classList.add('active');
      item.classList.add('active');
      }, 175);
    }
  }
};

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 }

  }

  setTimeout(scrollTo(step), 175);
});

Ответы (0 шт):