ใช้สำหรับโหลดข้อมูลมาแสดงด้วย ajax ด้วยการเช็คตำแหน่งการเลื่อน
ของ scrollbar กับสวนของข้อมูล โดยในที่นี้จะประยุกต์ กรณีเลื่อน scrollbar มายังตำแหน่ง
ล่างสุด หรือใกล้ตำแหน่งล่างสุดของหน้าเพจ
การเทียบกับตำแหน่งล่างสุดของเพจ
// เงื่อนไข event เมื่อมีการเลื่อน scrollbar ในหน้าเพจ $(window).scroll(function(){ // เปรียบเทียบส่วนของการเลื่อนจากตำแหน่งบน บวกกับส่วนของหน้าต่างข้อมูล // ถ้าเท่ากับ ความสูงของเนื้อหาหรือความสูงของเพจนั้นๆ หรือก็คือเมื่อเลื่อนมาตำแหน่งล่างสุด if($(window).scrollTop() + $(window).height() == $(document).height()){ // ชุดคำสั่งสำหรับทำงาน } });
กรณีเทียบแบบใกล้ตำแหน่งล่างสุดของเพจในอีก xxx พิเซล
// เงื่อนไข event เมื่อมีการเลื่อน scrollbar ในหน้าเพจ $(window).scroll(function(){ // เปรียบเทียบส่วนของการเลื่อนจากตำแหน่งบน บวกกับส่วนของหน้าต่างข้อมูล // ถ้า มีค่ามากกว่าจุดๆ หนึ่งของตำแหน่งที่ต้องการ ตามตัวอย่างคือใกล้ด้านล่างส่ด อีก 100 พิกเซล if($(window).scrollTop() + $(window).height() > $(document).height() - 100){ // ชุดคำสั่งสำหรับทำงาน } });
ดูโค้ดตัวอย่างทั้งหมด ชื่อไฟล์ load_data_when_scroll.php
<?phpif(isset($_GET["load_sample"])){ echo "<hr>"; for($i=1;$i<=20;$i++){ echo "<div>".$i."</div>"; } exit;}?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>load data when scroll bottom</title><style type="text/css">html,body{ background-color:#CCC; padding:0px; margin:0px; }div.main_test{ position:relative; background-color:#EAE1EA; margin:auto; width:800px; }</style></head>
<body>
<div class="main_test"><?php for($i=1;$i<50;$i++){?><div><?=$i?></div><?php } ?></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script><script type="text/javascript">$(function(){
// เงื่อนไข event เมื่อมีการเลื่อน scrollbar ในหน้าเพจ $(window).scroll(function(){ // เปรียบเทียบส่วนของการเลื่อนจากตำแหน่งบน บวกกับส่วนของหน้าต่างข้อมูล // ถ้าเท่ากับ ความสูงของเนื้อหาหรือความสูงของเพจนั้นๆ หรือก็คือเมื่อเลื่อนมาตำแหน่งล่างสุด if($(window).scrollTop() + $(window).height() == $(document).height()){ // ในที่นี้ทดสอบการดึงข้อมูลด้วย get อย่างง่าย $.get("load_data_when_scroll.php",{load_sample:1},function(data){ // นำข้อมูลที่ได้ไปแสดงต่อท้าย ภายใน div id เท่ากับ main_test $(".main_test").append(data); });
} }); });</script>
</body></html>
