events.html 2.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="content-type" content="text/html; charset=utf-8">
  5. <title>perfect-scrollbar example</title>
  6. <link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
  7. <script src="../dist/js/perfect-scrollbar.js"></script>
  8. <style>
  9. p {
  10. text-align: center;
  11. }
  12. .container {
  13. position: relative;
  14. margin: 0px auto;
  15. padding: 0px;
  16. width: 600px;
  17. height: 400px;
  18. overflow: auto;
  19. }
  20. .container .content {
  21. background-image: url('./azusa.jpg');
  22. width: 1280px;
  23. height: 720px;
  24. }
  25. </style>
  26. </head>
  27. <body>
  28. <div class="container">
  29. <div class="content">
  30. </div>
  31. </div>
  32. <p><strong>Axis</strong> <span id="axis">&hellip;</span></p>
  33. <p><strong>Direction</strong> <span id="direction">&hellip;</span></p>
  34. <p><strong>Start / End</strong> <span id="start-end">(scroll to the start or end of an axis)</span></p>
  35. <script>
  36. var container = document.querySelector('.container')
  37. , axis = document.getElementById('axis')
  38. , direction = document.getElementById('direction')
  39. , startEnd = document.getElementById('start-end');
  40. Ps.initialize(container);
  41. document.addEventListener('ps-scroll-y', function () {
  42. axis.innerHTML = 'Y Axis';
  43. });
  44. document.addEventListener('ps-scroll-x', function () {
  45. axis.innerHTML = 'X Axis';
  46. });
  47. document.addEventListener('ps-scroll-up', function () {
  48. direction.innerHTML = 'up';
  49. });
  50. document.addEventListener('ps-scroll-down', function () {
  51. direction.innerHTML = 'down';
  52. });
  53. document.addEventListener('ps-scroll-left', function () {
  54. direction.innerHTML = 'left';
  55. });
  56. document.addEventListener('ps-scroll-right', function () {
  57. direction.innerHTML = 'right';
  58. });
  59. document.addEventListener('ps-y-reach-start', function () {
  60. startEnd.innerHTML = 'Reached start of <em>Y-Axis</em>';
  61. });
  62. document.addEventListener('ps-y-reach-end', function () {
  63. startEnd.innerHTML = 'Reached end of <em>Y-Axis</em>';
  64. });
  65. document.addEventListener('ps-x-reach-start', function () {
  66. startEnd.innerHTML = 'Reached start of <em>X-Axis</em>';
  67. });
  68. document.addEventListener('ps-x-reach-end', function () {
  69. startEnd.innerHTML = 'Reached end of <em>X-Axis</em>'
  70. });
  71. </script>
  72. </body>
  73. </html>