static/script-bon.js

@@ -1,6 +1,7 @@
+async function setupPage() {
+
 // Checks if the user enabled prefers-reduced-motion
   const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-
 // Dictionary to keep track of animation intervals
   let animationIntervals = {};
 // Dictionary to keep track of delay count for each animation
@@ -80,14 +81,12 @@ animate("rennes", 1000);
   animate("orsay", 2000);
   animate("parterre", 1500);
 
-document.addEventListener('DOMContentLoaded', function() {
     const toggleableElements = document.querySelectorAll('.toggleable, .img_top_toggleable');
     toggleableElements.forEach(function (element) {
       element.addEventListener('click', function () {
         toggleAnimation();
       });
     });
-});
 
   function toggleAnimation() {
     const toggleable = document.querySelector('.toggleable');
@@ -116,10 +115,13 @@ function toggleAnimation() {
     }
   }
 
-let lastScrollTop = 0; // Last position of the scroll
+  let lastScrollTop = 0;
+  let isScrolling = false;
 
   window.addEventListener("scroll", function() {
-  let currentPosition = window.pageYOffset || document.documentElement.scrollTop;
+    if (!isScrolling) {
+      window.requestAnimationFrame(function() {
+        let currentPosition = window.scrollY || document.documentElement.scrollTop;
         const toggleButton = document.querySelectorAll('.toggleButton');
 
         if (currentPosition > lastScrollTop) {
@@ -133,6 +135,15 @@ window.addEventListener("scroll", function() {
             button.style.display = "block";
           });
         }
-  lastScrollTop = currentPosition <= 0 ? 0 : currentPosition; // For Mobile or negative scrolling
-}, false);
 
+        lastScrollTop = currentPosition <= 0 ? 0 : currentPosition; // For Mobile or negative scrolling
+        isScrolling = false;
+      });
+
+      isScrolling = true;
+    }
+  });
+}
+
+// Loads the script once the document is ready
+document.addEventListener('DOMContentLoaded', setupPage);