Как отследить событие скролла для поэкранной прокрутки?
<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);
});