Setting scroll progress to CSS variable

scrollYPosition.js

(() => {
    const rootStyle = document.querySelector(":root").style;
    const scrollMaxY = window.scrollMaxY || (document.documentElement.scrollHeight - document.documentElement.clientHeight);
    rootStyle.setProperty("--scroll-y-max-position", scrollMaxY)
    rootStyle.setProperty("--scroll-y-position", window.scrollY)
    rootStyle.setProperty("--scroll-y-progress", scrollMaxY ? window.scrollY / scrollMaxY : 1)
    document.addEventListener("scroll", () => {
      rootStyle.setProperty("--scroll-y-position", window.scrollY)
      rootStyle.setProperty("--scroll-y-progress", window.scrollY / scrollMaxY)
    })
})();