<!DOCTYPE html> <html> <head> <title>slimScroll + Lazy Loader</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.8/jquery.slimscroll.min.js"></script> </head> <body> <div id="testDiv"> <div style="padding: 3px; border: 1px solid #ccc; margin: 5px;">#1</div> <div style="padding: 3px; border: 1px solid #ccc; margin: 5px;">#2</div> <div style="padding: 3px; border: 1px solid #ccc; margin: 5px;">#3</div> <div style="padding: 3px; border: 1px solid #ccc; margin: 5px;">#4</div> <div style="padding: 3px; border: 1px solid #ccc; margin: 5px;">#5</div> <div style="padding: 3px; border: 1px solid #ccc; margin: 5px;">#6</div> <div style="padding: 3px; border: 1px solid #ccc; margin: 5px;">#7</div> <div style="padding: 3px; border: 1px solid #ccc; margin: 5px;">#8</div> <div style="padding: 3px; border: 1px solid #ccc; margin: 5px;">#9</div> <div style="padding: 3px; border: 1px solid #ccc; margin: 5px;">#10</div> </div> <!-- https://www.thaicreate.com/php/forum/107930.html --> </body> <script> $('#testDiv').slimscroll({ alwaysVisible: true, start: 'top', height: 150, width: 300 }); $('#testDiv').on('scroll', function() { let div = $(this).children()[0]; if(div.scrollTop == div.scrollHeight - div.clientHeight) { // เพิ่ม element var el = $('<div></div>').html('#' + ($('#testDiv').children().length + 1) + ' โหลดตอน scroll') .css({ padding: '3px', border: '1px solid #ccc', margin: '5px' }); $('#testDiv').append(el); } }); </script> </html>
เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง
