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

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

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