寻找一个简单的方法来构建一个滚动条与jquery

Question

我正在寻找一种基本和简单的方法来构建一个滚动条与jquery，但我似乎无法找到任何好的教程，我不想使用插件。我看了一些插件，但我的JS技能是贫穷的理解这些插件的方式。

所以我正在寻找一个简单，基本和轻量级来构建滚动条，任何人的想法？

Answer 1

你的意思是这样的？

但它只是一个使用了jQuery UI库无插件的概念：

DEMO

var parH = $('.parent').outerHeight(true); 
var areaH = $('.scrollable').outerHeight(true); 
var scrH = parH/(areaH/parH); 

function dragging(){  
    var scrPos = $('.scrollbar').position().top; 
    $('.scrollable').css({top: -(scrPos*(areaH/parH)-1)}); 
} 

$('.scrollbar').height(scrH); 
$('.scrollbar').draggable({ 
    axis: 'y', 
    containment: 'parent',  
    drag: function() { 
     dragging(); 
    } 
}); 

HTML如：

<div class="parent">  
    <div class="scrollbar"></div>  
    <div class="scrollable"> 
     text... 
    </div> 
</div> 

CSS如：

.parent{ 
    position:relative; 
    height:200px; 
    width:180px; 
    background:#eee; 
    overflow:hidden; 
    padding-right:17px; 
} 
.scrollable{ 
    position:absolute; 
    top:0px;   
    width:180px; 
    background:#cf5; 
} 
.scrollbar{ 
    cursor:n-resize; 
    position:absolute; 
    top:0px; 
    right:0px; 
    z-index:2; 
    background:#444; 
    width:17px; 
    border-radius:8px; 
} 

你可以把它变成一个插件并改进代码。
我认为一个好的开始。