init-and-remove.html 1.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  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: 0px 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. }
  20. </style>
  21. </head>
  22. <body>
  23. <div id="container">
  24. <div class="content">
  25. </div>
  26. </div>
  27. <div style="width: 600px; text-align: center; margin: 30px auto;">
  28. <button id="init">init</button>
  29. <button id="remove">remove</button>
  30. </div>
  31. <script>
  32. var $ = document.querySelector.bind(document);
  33. var ps;
  34. $('#init').addEventListener('click', () => {
  35. if (ps) ps.destroy();
  36. ps = new PerfectScrollbar('#container');
  37. });
  38. $('#remove').addEventListener('click', () => {
  39. if (ps) ps.destroy();
  40. ps = null;
  41. });
  42. </script>
  43. </body>
  44. </html>