Load on Scroll of Window and Specific Element Javascript by Rajesh Kumar Sahanee - February 19, 2020February 20, 20200 Post Views: 4,253 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 load-onscroll.html XHTML <!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> 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768 <!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 https://zatackcoder.com/wp-content/uploads/2020/02/load-onscroll.mp4 Demo Click Here for Demo Thank you Friends Please don’t forget share if you like it
