PHP Ionic Angular HTML5 AJAX Javascript CSS MySQL jQuery Forum


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

10 December 2009 By 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







Tags:: jquery scrollbar เลื่อน






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


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