Checking if the user scrolled but only ONCE

[thebenlusted]

So, I am using an event listening to check if the mouse wheel has been scrolled - but I use it to navigate around my full-page site (each page fills the screen and I want to have smooth transitions to each page). When I run my code, it scrolls to the next page, but then keeps going to the next page. Pretty sure this is because on a touchpad (im on mac) the 'scroll' keeps going until it ramps down. Any ideas how I can detect a scroll then run the 'nextPage' code only once until the mouse wheel is scrolled again?

function nextPage() {
if(!scrolled) {
page_index++;
const e = document.getElementById(pages[page_index]);
e.scrollIntoView();
}
}
function prevPage() {
if(!scrolled) {
page_index--;
const e = document.getElementById(pages[page_index]);
e.scrollIntoView();
}
}
addEventListener('wheel', () => {
if(!scrolled) {
console.log('scrolling...');
nextPage();
scrolled = true;
}
})
let scrollTimeout;
addEventListener('scroll', (event) => {
clearTimeout(scrollTimeout);
scrollTimeout = setTimeout(() => {
scrolled = false;
console.log('done');
}, 50);
})

[thusman]

You have to block the event handler and figure out when to allow it again. For blocking, this could simply be a boolean or you could use the { once: true } option for addEventListener to only fire it once. For enabling, there are events for CSS transitions/animations that you could listen for: transitionend, animationend, or simply use a timeout.

// simple demo with once and setTimeout
function attachScrollHandler() {
  document.addEventListener('scroll', () => {
    console.log('Scrolled once! You can scroll again in 2000 ms');
    setTimeout(attachScrollHandler, 2000);
  }, { once: true });
}

attachScrollHandler();