Merge pull request #535 from lpetrov/invalid-state-error-on-scroll-update
Fixes https://github.com/noraesae/perfect-scrollbar/issues/534 (Calli…
This commit is contained in:
commit
908cee5490
63
examples/infinite-scroll.html
Normal file
63
examples/infinite-scroll.html
Normal 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>
|
||||
|
@ -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'));
|
||||
}
|
||||
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user