ประยุกต์ เทคนิค jQuery เลื่อน scrollbar ขึ้นลง ตามเมาส์ สำหรับ div และ textarea
เขียนเมื่อ 13 ปีก่อน โดย Ninenik Narkdeeเลื่อน jquery scrollbar
คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ เลื่อน jquery scrollbar
ไปที่
Copy
ตัวอย่าง 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
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>
กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ

URL สำหรับอ้างอิง
Top
Copy
ขอบคุณทุกการสนับสนุน
![]()