<div class="information">
  isScrollingDown = <span id="scroll-down"></span>
  <p class="small">(currentScrollPosition > previousScrollPosition)</p>
</div>

<div class="scroll-container">
  <p class="previous-scroll-container">
    previousScrollPosition: <span id="previous-scroll">
      0
    </span> —
  </p>
  <p class="current-scroll-container">
    currentScrollPosition: <span id="current-scroll">
      0
    </span> —
  </p>
</div>

<footer>
  Pen by <a href="https://www.jemimaabu.com" target="_blank" rel="noopener">Jemima Abu</a> <span class="heart">&hearts;</span>
</footer>

:root {
  --previous-count: 0;
  --current-count: 0;
}

body {
  margin: 0;
  height: 200vh;
  position: relative;
}

.information {
  position: fixed;
  top: 0;
  font-size: 1.5rem;
  background-color: #fff;
}

.information .small {
  font-size: 1rem;
  margin: 0;
}

.scroll-container p {
  margin: 0;
  position: fixed;
  right: 0;
  font-size: 1.5rem;
}

.previous-scroll-container {
  top: var(--previous-count);
}

.current-scroll-container {
  top: var(--current-count);
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 1em;
  text-align: center;
  background-color: #FFDFB9;
}

footer a {
  color: inherit;
  text-decoration: none;
}

footer .heart {
  color: #DC143C;
}

const previousCount = document.getElementById("previous-scroll");
const currentCount = document.getElementById("current-scroll");
const scrollDown = document.getElementById("scroll-down");

const handlePreviousScroll = (count) => {
  previousCount.innerHTML = count;
  document.documentElement.style.setProperty("--previous-count", count + "px");
};

const handleCurrentScroll = (count) => {
  currentCount.innerHTML = count;
  document.documentElement.style.setProperty("--current-count", count + "px");
};

let previousScrollPosition = 0;

const handleScrollCount = () => {
  handlePreviousScroll(previousScrollPosition);

  let currentScrollPosition = window.scrollY || window.pageYOffset;

  handleCurrentScroll(currentScrollPosition);

  if (currentScrollPosition > previousScrollPosition) {
    scrollDown.innerHTML = "true";
    scrollDown.style.color = "green"
  } else {
    scrollDown.innerHTML = "false";
    scrollDown.style.color = "red"
  }

  previousScrollPosition = currentScrollPosition;
};

var throttleWait;

const throttle = (callback, time) => {
  if (throttleWait) return;
  throttleWait = true;

  setTimeout(() => {
    callback();
    throttleWait = false;
  }, time);
};

window.addEventListener("scroll", () => {
  throttle(handleScrollCount, 250);
});