cartodb/perfect-scrollbar
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #535 from lpetrov/invalid-state-error-on-scroll-update

Browse Source 
Fixes https://github.com/noraesae/perfect-scrollbar/issues/534 (Calli…
This commit is contained in:
Jun 2016-08-13 12:55:29 +09:00 committed by GitHub
commit 908cee5490
2 changed files with 78 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
examples/infinite-scroll.html Normal file
View File

@ -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>

45
src/js/plugin/update-scroll.js
View File

@ -2,29 +2,14 @@
var instances = require('./instances'); 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 lastTop;
var lastLeft; var lastLeft;
upEvent.initEvent('ps-scroll-up', true, true); var createDOMEvent = function (name) {
downEvent.initEvent('ps-scroll-down', true, true); var event = document.createEvent("Event");
leftEvent.initEvent('ps-scroll-left', true, true); event.initEvent(name, true, true);
rightEvent.initEvent('ps-scroll-right', true, true); return event;
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);
module.exports = function (element, axis, value) { module.exports = function (element, axis, value) {
if (typeof element === 'undefined') { if (typeof element === 'undefined') {
@ -41,12 +26,12 @@ module.exports = function (element, axis, value) {
if (axis === 'top' && value <= 0) { if (axis === 'top' && value <= 0) {
element.scrollTop = value = 0; // don't allow negative scroll element.scrollTop = value = 0; // don't allow negative scroll
element.dispatchEvent(yStartEvent); element.dispatchEvent(createDOMEvent('ps-y-reach-start'));
} }
if (axis === 'left' && value <= 0) { if (axis === 'left' && value <= 0) {
element.scrollLeft = value = 0; // don't allow negative scroll element.scrollLeft = value = 0; // don't allow negative scroll
element.dispatchEvent(xStartEvent); element.dispatchEvent(createDOMEvent('ps-x-reach-start'));
} }
var i = instances.get(element); var i = instances.get(element);
@ -60,7 +45,7 @@ module.exports = function (element, axis, value) {
} else { } else {
element.scrollTop = value; element.scrollTop = value;
} }
element.dispatchEvent(yEndEvent); element.dispatchEvent(createDOMEvent('ps-y-reach-end'));
} }
if (axis === 'left' && value >= i.contentWidth - i.containerWidth) { if (axis === 'left' && value >= i.contentWidth - i.containerWidth) {
@ -72,7 +57,7 @@ module.exports = function (element, axis, value) {
} else { } else {
element.scrollLeft = value; element.scrollLeft = value;
} }
element.dispatchEvent(xEndEvent); element.dispatchEvent(createDOMEvent('ps-x-reach-end'));
} }
if (!lastTop) { if (!lastTop) {
@ -84,29 +69,29 @@ module.exports = function (element, axis, value) {
} }
if (axis === 'top' && value < lastTop) { if (axis === 'top' && value < lastTop) {
element.dispatchEvent(upEvent); element.dispatchEvent(createDOMEvent('ps-scroll-up'));
} }
if (axis === 'top' && value > lastTop) { if (axis === 'top' && value > lastTop) {
element.dispatchEvent(downEvent); element.dispatchEvent(createDOMEvent('ps-scroll-down'));
} }
if (axis === 'left' && value < lastLeft) { if (axis === 'left' && value < lastLeft) {
element.dispatchEvent(leftEvent); element.dispatchEvent(createDOMEvent('ps-scroll-left'));
} }
if (axis === 'left' && value > lastLeft) { if (axis === 'left' && value > lastLeft) {
element.dispatchEvent(rightEvent); element.dispatchEvent(createDOMEvent('ps-scroll-right'));
} }
if (axis === 'top') { if (axis === 'top') {
element.scrollTop = lastTop = value; element.scrollTop = lastTop = value;
element.dispatchEvent(yEvent); element.dispatchEvent(createDOMEvent('ps-scroll-y'));
} }
if (axis === 'left') { if (axis === 'left') {
element.scrollLeft = lastLeft = value; element.scrollLeft = lastLeft = value;
element.dispatchEvent(xEvent); element.dispatchEvent(createDOMEvent('ps-scroll-x'));
} }
}; };