Merge pull request #46 from QuickCorp/v2.3

adding a better handling of scroll events
QuickCorp · Apr 13, 2021 · c6d28ae · c6d28ae
2 parents ae9828e + a11ce73
commit c6d28ae
Showing 1 changed file with 54 additions and 43 deletions.
diff --git a/QCObjects.js b/QCObjects.js
@@ -3887,53 +3887,64 @@
 
         /*
          * scroll management custom events
-         * usage: document.body.addEventListener('percentY90',function(e){console.log(e.detail.percentY)});
+         * usage: document.addEventListener('percentY90',function(e){console.log(e.detail.percentY)});
          * possible events: scrollpercent, defaultscroll, percentY0, percentY25, percentY50, percentY75, percentY90
          */
 
-        Tag("*").map(function(element) {
-          element.addEventListener("scroll", function(event) {
-            event.preventDefault();
-            var percentY = Math.round(event.target.scrollTop * 100 / event.target.scrollHeight);
-            var percentX = Math.round(event.target.scrollLeft * 100 / event.target.scrollWidth);
-            var scrollPercentEventEvent = new CustomEvent("scrollpercent", {
-              detail: {
-                percentX: percentX,
-                percentY: percentY
-              }
-            });
-            event.target.dispatchEvent(scrollPercentEventEvent);
-            var secondaryEventName = "defaultscroll";
-            switch (true) {
-              case (percentY === 0):
-                secondaryEventName = "percentY0";
-                break;
-              case (percentY === 25):
-                secondaryEventName = "percentY25";
-                break;
-              case (percentY === 50):
-                secondaryEventName = "percentY50";
-                break;
-              case (percentY === 75):
-                secondaryEventName = "percentY75";
-                break;
-              case (percentY === 90):
-                secondaryEventName = "percentY90";
-                break;
-              default:
-                break;
-            }
-            var secondaryCustomEvent = new CustomEvent(secondaryEventName, {
-              detail: {
-                percentX: percentX,
-                percentY: percentY
-              }
-            });
-            event.target.dispatchEvent(secondaryCustomEvent);
+         (function (_top){
+           let lastKnownScrollPosition = 0;
+           let ticking = false;
+           let scrollHeight = Math.max(
+             document.body.scrollHeight, document.documentElement.scrollHeight,
+             document.body.offsetHeight, document.documentElement.offsetHeight,
+             document.body.clientHeight, document.documentElement.clientHeight
+           );
+
+           let scrollWidth = Math.max(
+             document.body.scrollWidth, document.documentElement.scrollWidth,
+             document.body.offsetWidth, document.documentElement.offsetWidth,
+             document.body.clientWidth, document.documentElement.clientWidth
+           );
+
+           function scrollDispatcher(event) {
+               var percentY = Math.round(_top.scrollY * 100 / scrollHeight);
+               var percentX = Math.round(_top.scrollX * 100 / scrollWidth);
+               var scrollPercentEventEvent = new CustomEvent("scrollpercent", {
+                 detail: {
+                   percentX: percentX,
+                   percentY: percentY
+                 }
+               });
+               event.target.dispatchEvent(scrollPercentEventEvent);
+               var secondaryEventName = "defaultscroll";
+               var __valid_scrolls__ = [0, 5, 10, 25, 50, 75, 90, 95, 100];
+               __valid_scrolls__.filter(function (p) { return p===percentY}).map (function (pY){
+                   console.log(percentY);
+                 secondaryEventName = "percentY"+percentY.toString();
+                 var secondaryCustomEvent = new CustomEvent(secondaryEventName, {
+                   detail: {
+                     percentX: percentX,
+                     percentY: percentY
+                   }
+                 });
+                 event.target.dispatchEvent(secondaryCustomEvent);
+               })
 
-          });
-          return null;
-        });
+           }
+
+           document.addEventListener('scroll', function(event) {
+
+             if (!ticking) {
+               requestAnimationFrame(function() {
+                 scrollDispatcher(event);
+                 ticking = false;
+               });
+
+               ticking = true;
+             }
+           });
+
+         })(_top);
 
       });
     }, null);