2015-09-24 18:02:33 +08:00
|
|
|
<!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">…</span></p>
|
|
|
|
|
|
|
|
|
|
<p><strong>Direction</strong> <span id="direction">…</span></p>
|
2015-09-28 18:09:51 +08:00
|
|
|
|
|
|
|
|
<p><strong>Start / End</strong> <span id="start-end">(scroll to the start or end of an axis)</span></p>
|
2015-09-24 18:02:33 +08:00
|
|
|
<script>
|
2016-02-22 21:45:32 +08:00
|
|
|
var container = document.querySelector('.container');
|
|
|
|
|
var axis = document.getElementById('axis');
|
|
|
|
|
var direction = document.getElementById('direction');
|
|
|
|
|
var startEnd = document.getElementById('start-end');
|
|
|
|
|
|
2015-09-24 18:02:33 +08:00
|
|
|
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';
|
|
|
|
|
});
|
|
|
|
|
|
2015-09-28 18:09:51 +08:00
|
|
|
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>'
|
|
|
|
|
});
|
2015-09-24 18:02:33 +08:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
