infinite-scroll.html 918 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  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. height: 400px;
  9. width: 100%;
  10. border: 1px solid blue;
  11. overflow: auto;
  12. position: relative;
  13. }
  14. .entryPlaceholder {
  15. height: 48px;
  16. width: 100%;
  17. }
  18. </style>
  19. </head>
  20. <body>
  21. <div id="container">
  22. </div>
  23. <script>
  24. var $ = document.querySelector.bind(document);
  25. var x = 0;
  26. function addEntries() {
  27. for (var i = 0; i < 10; i++) {
  28. $('#container').innerHTML += '<div class="entryPlaceholder">Entry #' + (x++) + '</div>';
  29. }
  30. }
  31. addEntries();
  32. var ps = new PerfectScrollbar('#container');
  33. $('#container').addEventListener('ps-y-reach-end', function () {
  34. addEntries();
  35. ps.update();
  36. });
  37. </script>
  38. </body>
  39. </html>