Hello Friends, today I am going to share very small code for load on scroll of window and specific element. We can use both load on scroll of specific element or load on scroll of window according to our need. I had used load on scroll of specific element in one of my recent project and load on scroll of window in past project.
So Here is the code,
load-onscroll.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
<!DOCTYPE html> <html> <head> <title>Load On Scroll</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * { margin: 0px; padding: 0px; } #element1 { border: solid thin silver; overflow-y: scroll; max-height: 250px; width: 100%; } #element2 { border: solid thin silver; overflow-y: scroll; width: 100%; } </style> </head> <body> <div style="width: 50%; float: left;"> Load OnScroll of Element <ul id="element1"> </ul> </div> <div style="width: 50%; float: left;"> Load OnScroll of Window <ul id="element2"> </ul> </div> <script src="https://code.jquery.com/jquery-3.4.1.min.js" crossorigin="anonymous"></script> <script> $("#element1").scroll(function (e) { var element1 = document.querySelector('#element1'); if (element1.scrollTop + element1.clientHeight >= element1.scrollHeight) { loadmore1(); } }); $(window).scroll(function (e) { if ($(window).scrollTop() + $(window).height() == $(document).height()) { loadmore2(); } }); function loadmore1() { var count = $("#element1 li").length; for (var i = count; i < count + 15; i++) { $("#element1").append('<li>Item ' + i + '</li>') } } function loadmore2() { var count = $("#element2 li").length; for (var i = count; i < count + 50; i++) { $("#element2").append('<li>Item ' + i + '</li>') } } loadmore1(); loadmore2(); </script> </body> </html> |
Video
Demo
Click Here for Demo
Thank you Friends
Please don’t forget share if you like it
Comments