ขอให้ดูในส่วนรายละเอียดโค้ดภายในเป็นหลัก จะทำให้สามารถนำไปประยุกต์ใช้งาน ส่วนอื่นๆ ได้เช่น
---การหาตำแหน่งแกน x ตำแหน่งแกน y
---การหาความสูงของ window และความสูงของ document
---การเลื่ยน scrollbar เป็นต้น
สามารถนำไปประยุกต์กับ element ตัวอื่นๆ ที่มี scrollbar ได้
ตัวอย่าง https://www.ninenik.com/demo/scroll_bar.php
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(){
$(document).mousemove(function(event){ // กำหนด event เมื่อมีการเลื่อนเมาส์
var MouseX = event.clientX; // หาตำแหน่งแนวแกน x ของ mouse
var MouseY = event.clientY; // หาตำแหน่งแนวแกน y ของ mouse
var Hdocument=$(document).height(); // หาความสูงของเว็บเพจ โดยรวมส่วนที่ไม่แสดงด้วย
var HWindow=$(window).height(); // หาความสูงของหน้าต่างเว็บเพจ
var DifH=Hdocument-HWindow; // หาค่าความต่าง
var MultiDif=HWindow/MouseY; // คำนวณหาตำแหน่งการเลื่อน scrollbar ขั้นที่ 1
var ScrollMe=parseInt(DifH/MultiDif); // คำนวณหาตำแหน่งการเลื่อน scrollbar ขั้นที่ 2
window.scrollTo(0,ScrollMe); // เลื่อน scrollbar ไปยังตำแหน่งที่ต้องการ
});
$(document).bind("contextmenu",function(event){ // ยกเลิกการเลื่อนอัตโนมัติโดยการคลิกขวา
$(document).unbind("mousemove");
return false;
});
$("input#StopScroll").click(function(){ // หรือกำหนดยกเลิกการเลื่อนอัตโนมัติโดยการคลิกที่ปุ่ม
$(document).unbind("mousemove");
});
});
</script>
ตัวอย่าง https://www.ninenik.com/demo/scroll_bar.php
