Resolved scroll-progress.js issues

Author: SagarSingh01

src/js/scroll-progress.js

@@ -2,23 +2,29 @@
     const progressBar = document.getElementById("scrollProgressBar");
     if (!progressBar) return;
 
-    const updateProgress = () => {
-        const scrollTop = window.scrollY;
-        const scrollHeight =
-            document.documentElement.scrollHeight - window.innerHeight;
-
-        const progress =
-            scrollHeight > 0 ? (scrollTop / scrollHeight) * 100 : 0;
+    let ticking = false;
 
+    const updateProgress = () => {
+        const scrollTop = globalThis.scrollY;
+        const scrollHeight = document.documentElement.scrollHeight - globalThis.innerHeight;
+        const progress = scrollHeight > 0 ? (scrollTop / scrollHeight) * 100 : 0;
         progressBar.style.width = `${progress}%`;
+        ticking = false;
+    };
+
+    const onScroll = () => {
+        if (!ticking) {
+            requestAnimationFrame(updateProgress);
+            ticking = true;
+        }
     };
 
-    window.addEventListener("scroll", updateProgress, { passive: true });
-    window.addEventListener("resize", updateProgress);
+    globalThis.addEventListener("scroll", onScroll, { passive: true });
+    globalThis.addEventListener("resize", onScroll);
 
     if ("ResizeObserver" in window) {
-        new ResizeObserver(updateProgress).observe(document.body);
+        new ResizeObserver(onScroll).observe(document.body);
     }
 
     updateProgress();
-})();
+})();