options-wheelPropagation.html 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <link href="../css/perfect-scrollbar.css" rel="stylesheet">
  5. <script src="../dist/perfect-scrollbar.js"></script>
  6. <style>
  7. .container {
  8. position: relative;
  9. margin: 30px auto;
  10. padding: 0px;
  11. width: 600px;
  12. height: 400px;
  13. overflow: auto;
  14. }
  15. .container .content {
  16. background-image: url('./assets/azusa.jpg');
  17. width: 1280px;
  18. height: 720px;
  19. color: blue;
  20. font-size: 20px;
  21. }
  22. .space {
  23. padding: 150px 0;
  24. text-align: center;
  25. }
  26. </style>
  27. </head>
  28. <body>
  29. <div class="space">FOR SPACE</div>
  30. <div class="container">
  31. <div class="content">
  32. default
  33. </div>
  34. </div>
  35. <div class="space">FOR SPACE</div>
  36. <div class="container">
  37. <div class="content">
  38. wheelPropagation: true
  39. </div>
  40. </div>
  41. <div class="space">FOR SPACE</div>
  42. <script>
  43. var containers = document.querySelectorAll('.container');
  44. new PerfectScrollbar(containers[0]);
  45. new PerfectScrollbar(containers[1], {
  46. wheelPropagation: true
  47. });
  48. </script>
  49. </body>
  50. </html>