Scroll progress indicator in native JS

scroll-progress.js

import debounce from "lodash/debounce";

const getPageHeight = () =>
  Math.max(
    document.body.scrollHeight,
    document.body.offsetHeight,
    document.documentElement.clientHeight,
    document.documentElement.scrollHeight,
    document.documentElement.offsetHeight
  );

const progressBar = document.querySelector("[data-progress-bar]");
let pageHeight = getPageHeight();
let scrollY = window.pageYOffset;
let ticking = false;

const updateProgress = () => {
  const width = scrollY / (pageHeight - window.innerHeight);
  progressBar.style.width = `${width * 100}%`;
  ticking = false;
};

const onScroll = () => {
  if (!ticking) {
    ticking = true;
    window.requestAnimationFrame(updateProgress);
    scrollY = window.pageYOffset;
  }
};

const onResize = () => {
  pageHeight = getPageHeight();
};

export default () => {
  if (!progressBar) return;

  window.addEventListener("scroll", onScroll);
  window.addEventListener("resize", debounce(onResize, 200));
};