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

10 December 2009 เขียนเมื่อ 15 ปีก่อน โดย Ninenik Narkdee

เลื่อน scrollbar jquery

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

ดูแล้ว 14,739 ครั้ง

ตัวอย่าง 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 เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ