Scroll Direction

by Lalji Tadhani

CSS

body{height:900px;}

JavaScript

var start = window.pageYOffset;
window.addEventListener('scroll', function () {
  // Set the start position
  if (!start) {
    start = window.pageYOffset;
  }

  let end = window.pageYOffset;
  let distance = end - start;
  let docHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight);
  let height = docHeight - window.innerHeight;

  if (end >= height) {
    document.body.classList.add('scroll-bottom')
    document.body.classList.remove('scroll-top', 'scrolling-up', 'scrolling-down')
  } else if (end <= 1) {
    document.body.classList.add('scroll-top')
    document.body.classList.remove('scroll-bottom', 'scrolling-up', 'scrolling-down')
  } else if (distance > 0 && start !== 0 && end !== height) {
    document.body.classList.add('scrolling-down')
    document.body.classList.remove('scrolling-up', 'scroll-top', 'scroll-bottom')
    start = null;
  } else if (distance < 0 && start !== 0 && end !== height) {
    document.body.classList.add('scrolling-up')
    document.body.classList.remove('scrolling-down', 'scroll-top', 'scroll-bottom')
    start = null;
  }
});