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

Update events example to show new reach events

Browse Source
This commit is contained in:
DanielApt 2015-09-28 11:09:51 +01:00
parent 0b8fe0ac0b
commit e9bc40bd37
2 changed files with 20 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
examples/events.html
View File

@ -35,10 +35,13 @@
<p><strong>Axis</strong> <span id="axis">&hellip;</span></p> <p><strong>Axis</strong> <span id="axis">&hellip;</span></p>
<p><strong>Direction</strong> <span id="direction">&hellip;</span></p> <p><strong>Direction</strong> <span id="direction">&hellip;</span></p>
<p><strong>Start / End</strong> <span id="start-end">(scroll to the start or end of an axis)</span></p>
<script> <script>
var container = document.querySelector('.container') var container = document.querySelector('.container')
, axis = document.getElementById('axis') , axis = document.getElementById('axis')
, direction = document.getElementById('direction'); , direction = document.getElementById('direction')
, startEnd = document.getElementById('start-end');
Ps.initialize(container); Ps.initialize(container);
document.addEventListener('ps-scroll-y', function () { document.addEventListener('ps-scroll-y', function () {
@ -65,6 +68,22 @@
direction.innerHTML = 'right'; direction.innerHTML = 'right';
}); });
document.addEventListener('ps-y-reach-start', function () {
startEnd.innerHTML = 'Reached start of <em>Y-Axis</em>';
});
document.addEventListener('ps-y-reach-end', function () {
startEnd.innerHTML = 'Reached end of <em>Y-Axis</em>';
});
document.addEventListener('ps-x-reach-start', function () {
startEnd.innerHTML = 'Reached start of <em>X-Axis</em>';
});
document.addEventListener('ps-x-reach-end', function () {
startEnd.innerHTML = 'Reached end of <em>X-Axis</em>'
});
</script> </script>
</body> </body>
</html> </html>

53
examples/reach-the-end-callback.html
View File

@ -1,53 +0,0 @@
<!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>
#description {
border: 1px solid gray;
height:150px;
width: 400px;
overflow: auto;
position: relative;
}
#status { color: red; }
</style>
</head>
<body>
<div id="description" class="wrapper">
<p>Hello, world! 0</p>
<p>Hello, world! 1</p>
<p>Hello, world! 2</p>
<p>Hello, world! 3</p>
<p>Hello, world! 4</p>
<p>Hello, world! 5</p>
<p>Hello, world! 6</p>
<p>Hello, world! 7</p>
<p>Hello, world! 8</p>
<p>Hello, world! 9</p>
</div>
<div id="status">
</div>
<script type="text/javascript">
var $ = document.querySelector.bind(document);
window.onload = function () {
var container = $('#description');
var stat = $('#status');
Ps.initialize(container);
container.addEventListener('scroll', function (e) {
if(container.scrollTop === 0) {
stat.innerHTML = 'it reaches the top!';
}
else if (container.scrollTop === container.scrollHeight - container.clientHeight) {
stat.innerHTML = 'it reaches the end!';
} else {
stat.innerHTML = '';
}
});
};
</script>
</body>
</html>