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

Merge pull request #386 from DanielApt/events

Browse Source 
Dispatch scroll events
This commit is contained in:
Jun 2015-09-24 19:44:31 +09:00
commit a3676556b2
10 changed files with 221 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
README.md
View File

@ -312,6 +312,41 @@ The number of pixels the content height can surpass the container height without
When set to false, when clicking on a rail, the click event will be allowed to propagate. When set to false, when clicking on a rail, the click event will be allowed to propagate.
**Default: true** **Default: true**
## Events
perfect-scrollbar dispatches custom events.
### ps-scroll-y
This event fires when the y-axis is scrolled in either direction.
### ps-scroll-x
This event fires when the x-axis is scrolled in either direction.
### ps-scroll-up
This event fires when scrolling upwards.
### ps-scroll-down
This event fires when scrolling downwards.
### ps-scroll-left
This event fires when scrolling to the left.
### ps-scroll-right
This event fires when scrolling to the right.
You can listen to these events either with vanilla JavaScript
```javascript
document.addEventListener('ps-scroll-x', function () {
// ...
})
```
or with jQuery
```javascript
$(document).on('ps-scroll-x', function () {
// ...
})
```
## Contribution ## Contribution
#### Please read [Contributing](https://github.com/noraesae/perfect-scrollbar/wiki/Contributing) in the wiki before making any contribution. #### Please read [Contributing](https://github.com/noraesae/perfect-scrollbar/wiki/Contributing) in the wiki before making any contribution.

70
examples/events.html Normal file
View File

@ -0,0 +1,70 @@
<!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>
p {
text-align: center;
}
.container {
position: relative;
margin: 0px auto;
padding: 0px;
width: 600px;
height: 400px;
overflow: auto;
}
.container .content {
background-image: url('./azusa.jpg');
width: 1280px;
height: 720px;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
</div>
</div>
<p><strong>Axis</strong> <span id="axis">&hellip;</span></p>
<p><strong>Direction</strong> <span id="direction">&hellip;</span></p>
<script>
var container = document.querySelector('.container')
, axis = document.getElementById('axis')
, direction = document.getElementById('direction');
Ps.initialize(container);
document.addEventListener('ps-scroll-y', function () {
axis.innerHTML = 'Y Axis';
});
document.addEventListener('ps-scroll-x', function () {
axis.innerHTML = 'X Axis';
});
document.addEventListener('ps-scroll-up', function () {
direction.innerHTML = 'up';
});
document.addEventListener('ps-scroll-down', function () {
direction.innerHTML = 'down';
});
document.addEventListener('ps-scroll-left', function () {
direction.innerHTML = 'left';
});
document.addEventListener('ps-scroll-right', function () {
direction.innerHTML = 'right';
});
</script>
</body>
</html>

7
src/js/plugin/handler/click-rail.js
View File

@ -5,7 +5,8 @@
var h = require('../../lib/helper') var h = require('../../lib/helper')
, instances = require('../instances') , instances = require('../instances')
, updateGeometry = require('../update-geometry'); , updateGeometry = require('../update-geometry')
, updateScroll = require('../update-scroll');
function bindClickRailHandler(element, i) { function bindClickRailHandler(element, i) {
function pageOffset(el) { function pageOffset(el) {
@ -28,7 +29,7 @@ function bindClickRailHandler(element, i) {
positionRatio = 1; positionRatio = 1;
} }
element.scrollTop = (i.contentHeight - i.containerHeight) * positionRatio; updateScroll(element, 'top', (i.contentHeight - i.containerHeight) * positionRatio);
updateGeometry(element); updateGeometry(element);
e.stopPropagation(); e.stopPropagation();
@ -49,7 +50,7 @@ function bindClickRailHandler(element, i) {
positionRatio = 1; positionRatio = 1;
} }
element.scrollLeft = ((i.contentWidth - i.containerWidth) * positionRatio) - i.negativeScrollAdjustment; updateScroll(element, 'left', ((i.contentWidth - i.containerWidth) * positionRatio) - i.negativeScrollAdjustment);
updateGeometry(element); updateGeometry(element);
e.stopPropagation(); e.stopPropagation();

7
src/js/plugin/handler/drag-scrollbar.js
View File

@ -6,7 +6,8 @@
var d = require('../../lib/dom') var d = require('../../lib/dom')
, h = require('../../lib/helper') , h = require('../../lib/helper')
, instances = require('../instances') , instances = require('../instances')
, updateGeometry = require('../update-geometry'); , updateGeometry = require('../update-geometry')
, updateScroll = require('../update-scroll');
function bindMouseScrollXHandler(element, i) { function bindMouseScrollXHandler(element, i) {
var currentLeft = null; var currentLeft = null;
@ -25,7 +26,7 @@ function bindMouseScrollXHandler(element, i) {
} }
var scrollLeft = h.toInt(i.scrollbarXLeft * (i.contentWidth - i.containerWidth) / (i.containerWidth - (i.railXRatio * i.scrollbarXWidth))) - i.negativeScrollAdjustment; var scrollLeft = h.toInt(i.scrollbarXLeft * (i.contentWidth - i.containerWidth) / (i.containerWidth - (i.railXRatio * i.scrollbarXWidth))) - i.negativeScrollAdjustment;
element.scrollLeft = scrollLeft; updateScroll(element, 'left', scrollLeft);
} }
var mouseMoveHandler = function (e) { var mouseMoveHandler = function (e) {
@ -70,7 +71,7 @@ function bindMouseScrollYHandler(element, i) {
} }
var scrollTop = h.toInt(i.scrollbarYTop * (i.contentHeight - i.containerHeight) / (i.containerHeight - (i.railYRatio * i.scrollbarYHeight))); var scrollTop = h.toInt(i.scrollbarYTop * (i.contentHeight - i.containerHeight) / (i.containerHeight - (i.railYRatio * i.scrollbarYHeight)));
element.scrollTop = scrollTop; updateScroll(element, 'top', scrollTop);
} }
var mouseMoveHandler = function (e) { var mouseMoveHandler = function (e) {

7
src/js/plugin/handler/keyboard.js
View File

@ -5,7 +5,8 @@
var h = require('../../lib/helper') var h = require('../../lib/helper')
, instances = require('../instances') , instances = require('../instances')
, updateGeometry = require('../update-geometry'); , updateGeometry = require('../update-geometry')
, updateScroll = require('../update-scroll');
function bindKeyboardHandler(element, i) { function bindKeyboardHandler(element, i) {
var hovered = false; var hovered = false;
@ -107,8 +108,8 @@ function bindKeyboardHandler(element, i) {
return; return;
} }
element.scrollTop = element.scrollTop - deltaY; updateScroll(element, 'top', element.scrollTop - deltaY);
element.scrollLeft = element.scrollLeft + deltaX; updateScroll(element, 'left', element.scrollLeft + deltaX);
updateGeometry(element); updateGeometry(element);
shouldPrevent = shouldPreventDefault(deltaX, deltaY); shouldPrevent = shouldPreventDefault(deltaX, deltaY);

15
src/js/plugin/handler/mouse-wheel.js
View File

@ -5,7 +5,8 @@
var h = require('../../lib/helper') var h = require('../../lib/helper')
, instances = require('../instances') , instances = require('../instances')
, updateGeometry = require('../update-geometry'); , updateGeometry = require('../update-geometry')
, updateScroll = require('../update-scroll');
function bindMouseWheelHandler(element, i) { function bindMouseWheelHandler(element, i) {
var shouldPrevent = false; var shouldPrevent = false;
@ -100,24 +101,24 @@ function bindMouseWheelHandler(element, i) {
if (!i.settings.useBothWheelAxes) { if (!i.settings.useBothWheelAxes) {
// deltaX will only be used for horizontal scrolling and deltaY will // deltaX will only be used for horizontal scrolling and deltaY will
// only be used for vertical scrolling - this is the default // only be used for vertical scrolling - this is the default
element.scrollTop = element.scrollTop - (deltaY * i.settings.wheelSpeed); updateScroll(element, 'top', element.scrollTop - (deltaY * i.settings.wheelSpeed));
element.scrollLeft = element.scrollLeft + (deltaX * i.settings.wheelSpeed); updateScroll(element, 'left', element.scrollLeft + (deltaX * i.settings.wheelSpeed));
} else if (i.scrollbarYActive && !i.scrollbarXActive) { } else if (i.scrollbarYActive && !i.scrollbarXActive) {
// only vertical scrollbar is active and useBothWheelAxes option is // only vertical scrollbar is active and useBothWheelAxes option is
// active, so let's scroll vertical bar using both mouse wheel axes // active, so let's scroll vertical bar using both mouse wheel axes
if (deltaY) { if (deltaY) {
element.scrollTop = element.scrollTop - (deltaY * i.settings.wheelSpeed); updateScroll(element, 'top', element.scrollTop - (deltaY * i.settings.wheelSpeed));
} else { } else {
element.scrollTop = element.scrollTop + (deltaX * i.settings.wheelSpeed); updateScroll(element, 'top', element.scrollTop + (deltaX * i.settings.wheelSpeed));
} }
shouldPrevent = true; shouldPrevent = true;
} else if (i.scrollbarXActive && !i.scrollbarYActive) { } else if (i.scrollbarXActive && !i.scrollbarYActive) {
// useBothWheelAxes and only horizontal bar is active, so use both // useBothWheelAxes and only horizontal bar is active, so use both
// wheel axes for horizontal bar // wheel axes for horizontal bar
if (deltaX) { if (deltaX) {
element.scrollLeft = element.scrollLeft + (deltaX * i.settings.wheelSpeed); updateScroll(element, 'left', element.scrollLeft + (deltaX * i.settings.wheelSpeed));
} else { } else {
element.scrollLeft = element.scrollLeft - (deltaY * i.settings.wheelSpeed); updateScroll(element, 'left', element.scrollLeft - (deltaY * i.settings.wheelSpeed));
} }
shouldPrevent = true; shouldPrevent = true;
} }

7
src/js/plugin/handler/selection.js
View File

@ -5,7 +5,8 @@
var h = require('../../lib/helper') var h = require('../../lib/helper')
, instances = require('../instances') , instances = require('../instances')
, updateGeometry = require('../update-geometry'); , updateGeometry = require('../update-geometry')
, updateScroll = require('../update-scroll');
function bindSelectionHandler(element, i) { function bindSelectionHandler(element, i) {
function getRangeNode() { function getRangeNode() {
@ -28,8 +29,8 @@ function bindSelectionHandler(element, i) {
return; return;
} }
element.scrollTop = element.scrollTop + scrollDiff.top; updateScroll(element, 'top', element.scrollTop + scrollDiff.top);
element.scrollLeft = element.scrollLeft + scrollDiff.left; updateScroll(element, 'left', element.scrollLeft + scrollDiff.left);
updateGeometry(element); updateGeometry(element);
}, 50); // every .1 sec }, 50); // every .1 sec
} }

7
src/js/plugin/handler/touch.js
View File

@ -4,7 +4,8 @@
'use strict'; 'use strict';
var instances = require('../instances') var instances = require('../instances')
, updateGeometry = require('../update-geometry'); , updateGeometry = require('../update-geometry')
, updateScroll = require('../update-scroll');
function bindTouchHandler(element, i, supportsTouch, supportsIePointer) { function bindTouchHandler(element, i, supportsTouch, supportsIePointer) {
function shouldPreventDefault(deltaX, deltaY) { function shouldPreventDefault(deltaX, deltaY) {
@ -33,8 +34,8 @@ function bindTouchHandler(element, i, supportsTouch, supportsIePointer) {
} }
function applyTouchMove(differenceX, differenceY) { function applyTouchMove(differenceX, differenceY) {
element.scrollTop = element.scrollTop - differenceY; updateScroll(element, 'top', element.scrollTop - differenceY);
element.scrollLeft = element.scrollLeft - differenceX; updateScroll(element, 'left', element.scrollLeft - differenceX);
updateGeometry(element); updateGeometry(element);
} }

5
src/js/plugin/update-geometry.js
View File

@ -6,7 +6,8 @@
var cls = require('../lib/class') var cls = require('../lib/class')
, d = require('../lib/dom') , d = require('../lib/dom')
, h = require('../lib/helper') , h = require('../lib/helper')
, instances = require('./instances'); , instances = require('./instances')
, updateScroll = require('./update-scroll');
function getThumbSize(i, thumbSize) { function getThumbSize(i, thumbSize) {
if (i.settings.minScrollbarLength) { if (i.settings.minScrollbarLength) {
@ -103,7 +104,7 @@ module.exports = function (element) {
i.scrollbarYActive = false; i.scrollbarYActive = false;
i.scrollbarYHeight = 0; i.scrollbarYHeight = 0;
i.scrollbarYTop = 0; i.scrollbarYTop = 0;
element.scrollTop = 0; updateScroll(element, 'top', 0);
} }
if (i.scrollbarXLeft >= i.railXWidth - i.scrollbarXWidth) { if (i.scrollbarXLeft >= i.railXWidth - i.scrollbarXWidth) {

85
src/js/plugin/update-scroll.js Normal file
View File

@ -0,0 +1,85 @@
/* Copyright (c) 2015 Hyunje Alex Jun and other contributors
* Licensed under the MIT License
*/
'use strict';
var instances = require('./instances');
var upEvent = document.createEvent('Event')
, downEvent = document.createEvent('Event')
, leftEvent = document.createEvent('Event')
, rightEvent = document.createEvent('Event')
, yEvent = document.createEvent('Event')
, xEvent = document.createEvent('Event')
, lastTop
, 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);
module.exports = function (element, axis, value) {
if (typeof element === 'undefined' ) {
throw 'You must provide an element to the update-scroll function';
}
if (typeof axis === 'undefined') {
throw 'You must provide an axis to the update-scroll function';
}
if (typeof value === 'undefined') {
throw 'You must provide a value to the update-scroll function'
}
if (value < 0) {
return; // don't allow negative scroll
}
var i = instances.get(element);
if (axis === 'top' && value > i.contentHeight - i.containerHeight) {
return; // don't allow scroll past container
}
if (axis === 'left' && value > i.contentWidth - i.containerWidth) {
return; // don't allow scroll past container
}
if (!lastTop) {
lastTop = element.scrollTop;
}
if (!lastLeft) {
lastLeft = element.scrollLeft;
}
if (axis === 'top' && value < lastTop) {
element.dispatchEvent(upEvent);
}
if (axis === 'top' && value > lastTop) {
element.dispatchEvent(downEvent);
}
if (axis === 'left' && value < lastLeft) {
element.dispatchEvent(leftEvent);
}
if (axis === 'left' && value > lastLeft) {
element.dispatchEvent(rightEvent);
}
if (axis === 'top') {
element.scrollTop = lastTop = value;
element.dispatchEvent(yEvent);
}
if (axis === 'left') {
element.scrollLeft = lastLeft = value;
element.dispatchEvent(xEvent);
}
};