| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889 |
- <!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>
- <p><strong>Start / End</strong> <span id="start-end">(scroll to the start or end of an axis)</span></p>
- <script>
- var container = document.querySelector('.container')
- , axis = document.getElementById('axis')
- , direction = document.getElementById('direction')
- , startEnd = document.getElementById('start-end');
- 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';
- });
- 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>
- </body>
- </html>
|