Fixes https://github.com/noraesae/perfect-scrollbar/issues/534 (Calling .update from an ps-scroll-y triggers an InvalidStateError #534)

8 years ago · 34135d6ef0
parent 0ab95f2d57
commit 34135d6ef0
2 changed files with 78 additions and 30 deletions
--- a/examples/infinite-scroll.html
+++ b/examples/infinite-scroll.html
@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <title>perfect-scrollbar example</title>
+    <link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
+    <script src="../dist/js/perfect-scrollbar.js"></script>
+    <style>
+      #Default {
+        height: 400px;
+        width: 100%;
+        background-color: #f1f1f1;
+        border: 1px solid blue;
+        overflow: auto;
+        position: relative;
+      }
+      .entryPlaceholder {
+        height: 48px;
+        width: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="Default">
+    </div>
+
+    <script>
+      var x = 0;
+      var $ = document.querySelector.bind(document);
+      window.onload = function () {
+        // show some initial data
+        for(var i = 0; i < 10; i++) {
+          $('#Default').innerHTML += '<div class="entryPlaceholder">Entry #' + (x++) + '</div>';
+        }
+        Ps.initialize($('#Default'));
+
+      };
+
+      var isProgramaticallyTriggered = false;
+      var addEntries = function(num) {
+        for(var i = 0; i < num; i++) {
+          $('#Default').innerHTML += '<div class="entryPlaceholder">Entry #' + (x++) + '</div>';
+        }
+
+        isProgramaticallyTriggered = true;
+        Ps.update($('#Default'));
+        isProgramaticallyTriggered = false;
+      };
+
+
+
+
+      // on scroll, add more entries
+      document.addEventListener('ps-scroll-y', function(e) {
+        if (!isProgramaticallyTriggered) {
+          console.debug("user scrolled to pos: ", $('#Default').scrollTop);
+          addEntries(1);
+        }
+      });
+    </script>
+  </body>
+</html>
+
--- a/src/js/plugin/update-scroll.js
+++ b/src/js/plugin/update-scroll.js
@ -2,29 +2,14 @@

 var instances = require('./instances');

-var upEvent = document.createEvent('Event');
-var downEvent = document.createEvent('Event');
-var leftEvent = document.createEvent('Event');
-var rightEvent = document.createEvent('Event');
-var yEvent = document.createEvent('Event');
-var xEvent = document.createEvent('Event');
-var xStartEvent = document.createEvent('Event');
-var xEndEvent = document.createEvent('Event');
-var yStartEvent = document.createEvent('Event');
-var yEndEvent = document.createEvent('Event');
 var lastTop;
 var lastLeft;

-upEvent.initEvent('ps-scroll-up', true, true);
-downEvent.initEvent('ps-scroll-down', true, true);
-leftEvent.initEvent('ps-scroll-left', true, true);
-rightEvent.initEvent('ps-scroll-right', true, true);
-yEvent.initEvent('ps-scroll-y', true, true);
-xEvent.initEvent('ps-scroll-x', true, true);
-xStartEvent.initEvent('ps-x-reach-start', true, true);
-xEndEvent.initEvent('ps-x-reach-end', true, true);
-yStartEvent.initEvent('ps-y-reach-start', true, true);
-yEndEvent.initEvent('ps-y-reach-end', true, true);
+var createDOMEvent = function (name) {
+  var event = document.createEvent("Event");
+  event.initEvent(name, true, true);
+  return event;
+};

 module.exports = function (element, axis, value) {
  if (typeof element === 'undefined') {
@ -41,12 +26,12 @@ module.exports = function (element, axis, value) {

  if (axis === 'top' && value <= 0) {
    element.scrollTop = value = 0; // don't allow negative scroll
-    element.dispatchEvent(yStartEvent);
+    element.dispatchEvent(createDOMEvent('ps-y-reach-start'));
  }

  if (axis === 'left' && value <= 0) {
    element.scrollLeft = value = 0; // don't allow negative scroll
-    element.dispatchEvent(xStartEvent);
+    element.dispatchEvent(createDOMEvent('ps-x-reach-start'));
  }

  var i = instances.get(element);
@ -60,7 +45,7 @@ module.exports = function (element, axis, value) {
    } else {
      element.scrollTop = value;
    }
-    element.dispatchEvent(yEndEvent);
+    element.dispatchEvent(createDOMEvent('ps-y-reach-end'));
  }

  if (axis === 'left' && value >= i.contentWidth - i.containerWidth) {
@ -72,7 +57,7 @@ module.exports = function (element, axis, value) {
    } else {
      element.scrollLeft = value;
    }
-    element.dispatchEvent(xEndEvent);
+    element.dispatchEvent(createDOMEvent('ps-x-reach-end'));
  }

  if (!lastTop) {
@ -84,29 +69,29 @@ module.exports = function (element, axis, value) {
  }

  if (axis === 'top' && value < lastTop) {
-    element.dispatchEvent(upEvent);
+    element.dispatchEvent(createDOMEvent('ps-scroll-up'));
  }

  if (axis === 'top' && value > lastTop) {
-    element.dispatchEvent(downEvent);
+    element.dispatchEvent(createDOMEvent('ps-scroll-down'));
  }

  if (axis === 'left' && value < lastLeft) {
-    element.dispatchEvent(leftEvent);
+    element.dispatchEvent(createDOMEvent('ps-scroll-left'));
  }

  if (axis === 'left' && value > lastLeft) {
-    element.dispatchEvent(rightEvent);
+    element.dispatchEvent(createDOMEvent('ps-scroll-right'));
  }

  if (axis === 'top') {
    element.scrollTop = lastTop = value;
-    element.dispatchEvent(yEvent);
+    element.dispatchEvent(createDOMEvent('ps-scroll-y'));
  }

  if (axis === 'left') {
    element.scrollLeft = lastLeft = value;
-    element.dispatchEvent(xEvent);
+    element.dispatchEvent(createDOMEvent('ps-scroll-x'));
  }

 };