ใช้สำหรับโหลดข้อมูลมาแสดงด้วย 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
<?php
if(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>
