การเลื่อน แล้วโหลดข้อมูล อัตโนมัติ ด้วย jQuery

24 April 2013 เขียนเมื่อ 10 ปีก่อน โดย Ninenik Narkdee

การเลื่อนแล้วโหลด ajax jquery php

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ การเลื่อนแล้วโหลด ajax jquery php

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

กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ