HTML Scroll Direction Listener

scrollDirectionListener.js

// compatibility check
const supportPageOffset = window.pageXOffset !== undefined;
const isCSS1Compat = ((document.compatMode || '') === 'CSS1Compat');

// previous scroll value
let currentScrollTop = supportPageOffset
  ? window.pageYOffset
  : isCSS1Compat
    ? document.documentElement.scrollTop
    : document.body.scrollTop;

// timeout variable
let isScrolling;

function scrollDirectionListener (event) {
    // current scroll value
    const newScrollTop = supportPageOffset
    	? window.pageYOffset
      : isCSS1Compat
      	? document.documentElement.scrollTop
        : document.body.scrollTop;

     // get scroll direction
    const direction = newScrollTop > currentScrollTop
      ? 'Scrolling down.'
      : 'Scrolling up.';

    console.log('direction:', direction)
    currentScrollTop = newScrollTop;
    
    // clear our timeout throughout the scroll
    window.clearTimeout(isScrolling);
    // set a timeout to run after scrolling ends
    isScrolling = setTimeout(function() {
      console.log('Scrolling has stopped.');
    }, 128);
}

document.addEventListener('scroll', scrollDirectionListener);