From 34135d6ef0eda62600172e5198ad45812af43449 Mon Sep 17 00:00:00 2001 From: Lyubomir Petrov Date: Tue, 19 Jul 2016 15:57:17 +0300 Subject: [PATCH] Fixes https://github.com/noraesae/perfect-scrollbar/issues/534 (Calling .update from an ps-scroll-y triggers an InvalidStateError #534) --- examples/infinite-scroll.html | 63 ++++++++++++++++++++++++++++++++++ src/js/plugin/update-scroll.js | 45 ++++++++---------------- 2 files changed, 78 insertions(+), 30 deletions(-) create mode 100644 examples/infinite-scroll.html diff --git a/examples/infinite-scroll.html b/examples/infinite-scroll.html new file mode 100644 index 0000000..c3b455e --- /dev/null +++ b/examples/infinite-scroll.html @@ -0,0 +1,63 @@ + + + + + perfect-scrollbar example + + + + + +
+
+ + + + + diff --git a/src/js/plugin/update-scroll.js b/src/js/plugin/update-scroll.js index 1fb40e4..1a9ad2c 100644 --- 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')); } };