text-content.html 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  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. #description {
  10. border: 1px solid gray;
  11. height:150px;
  12. width: 400px;
  13. overflow: auto;
  14. position: relative;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19. <div id="description" class="wrapper">
  20. <p>The command takes options applicable</p>
  21. <p>The command takes options applicable</p>
  22. <p>The command takes options applicable</p>
  23. <p>The command takes options applicable</p>
  24. <p>The command takes options applicable</p>
  25. <p>The command takes options applicable</p>
  26. <p>The command takes options applicable</p>
  27. <p>The command takes options applicable</p>
  28. <p>The command takes options applicable</p>
  29. <p>The command takes options applicable</p>
  30. </div>
  31. <button id='redraw'>Redraw</button>
  32. <script>
  33. var $ = document.querySelector.bind(document);
  34. window.onload = function () {
  35. Ps.initialize($('#description'), {
  36. useSelectionScroll: true
  37. });
  38. };
  39. $('#redraw').addEventListener('click', function () {
  40. var oldHtml = $('#description').innerHTML;
  41. $('#description').innerHTML = '';
  42. setTimeout(function () {
  43. $('#description').innerHTML = '' +
  44. '<p>The command takes options applicable</p>' +
  45. '<p>The command takes options applicable</p>' +
  46. '<p>The command takes options applicable</p>' +
  47. '<p>The command takes options applicable</p>' +
  48. '<p>The command takes options applicable</p>' +
  49. '<p>The command takes options applicable</p>' +
  50. '<p>The command takes options applicable</p>' +
  51. '<p>The command takes options applicable</p>' +
  52. '<p>The command takes options applicable</p>' +
  53. '<p>The command takes options applicable</p>';
  54. Ps.update($('#description'));
  55. }, 500);
  56. });
  57. </script>
  58. </body>
  59. </html>