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

เขียนเมื่อ 10 ปีก่อน โดย Ninenik Narkdee
การเลื่อนแล้วโหลด php jquery ajax

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

ดูแล้ว 22,218 ครั้ง


ใช้สำหรับโหลดข้อมูลมาแสดงด้วย 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 เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ











URL สำหรับอ้างอิง





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ