ประยุกต์ เทคนิค jQuery เลื่อน scrollbar ขึ้นลง ตามเมาส์ สำหรับ div และ textarea

เขียนเมื่อ 10 ปีก่อน โดย Ninenik Narkdee
เลื่อน scrollbar jquery

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



 ตัวอย่าง www.ninenik.com/demo/auto-scrollbar-textarea.php


บรรทัดที่1
lบรรทัดที่2
lบรรทัดที่3
lบรรทัดที่4
lบรรทัดที่5
lบรรทัดที่6
lบรรทัดที่7
lบรรทัดที่8
lบรรทัดที่9
lบรรทัดที่10
lบรรทัดที่11
lบรรทัดที่12
lบรรทัดที่13
lบรรทัดที่14
lบรรทัดที่15
lบรรทัดที่16
lบรรทัดที่17
lบรรทัดที่18
lบรรทัดที่19
lบรรทัดที่20
lบรรทัดที่21
lบรรทัดที่22
lบรรทัดที่23
lบรรทัดที่24
lบรรทัดที่25
l

css กำหนด div ให้มี scrollbar สำหรับทดสอบ

<style type="text/css">
/* css สำหรับกำหนด div ให้มี scrollbar */
div#myDiv{
	width:150px;
	border:1px solid #FFCCCC;
	height:100px;
	overflow:auto;
}
</style>

javascript Code

<script src="http://www.google.com/jsapi" type="text/javascript"></script>  
<script type="text/javascript">  
google.load("jquery", "1.3.2");  
</script>  
<script type="text/javascript">  
$(function(){  
	function scrollWithMouse(event,Obj){
		var MouseY = event.clientY; // หาตำแหน่งแนวแกน y ของ mouse  
		var Ythis=$(Obj).offset().top; // หาตำแหน่งแนวแกน y ของ Object
		MouseY-=Ythis; // กำหนดตำแหน่งแกน y ของ mouse เริ่มจาก Object
		var scrollHobj=$(Obj).get(0).scrollHeight; // หาความสูงของ Object โดยรวมส่วนที่ไม่แสดงด้วย  
		var Hobj=$(Obj).innerHeight(); // หาความสูงของ Object ไม่รวมส่วนที่ไม่แสดง
		var DifH=scrollHobj-Hobj; // หาค่าความต่าง  
		var MultiDif=Hobj/MouseY; // คำนวณหาตำแหน่งการเลื่อน scrollbar ขั้นที่ 1  
		var ScrollMe=parseInt(DifH/MultiDif); // คำนวณหาตำแหน่งการเลื่อน scrollbar ขั้นที่ 2  
		$(Obj).scrollTop(ScrollMe);	
	}
	
	// การเรียกใช้งานสำหรับ textarea
	$("#myTexArea").mousemove(function(){
		scrollWithMouse(event,"#myTexArea");
	});
	// การเรียกใช้งานสำหรับ div
	$("#myDiv").mousemove(function(){
		scrollWithMouse(event,"#myDiv");
	});	
	
});  
</script> 

 ตัวอย่าง www.ninenik.com/demo/auto-scrollbar-textarea.php



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











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











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