javascript - 寻找一种使用 jquery 构建滚动条的简单方法

Question

我正在寻找一种基本而简单的方法来使用 jquery 构建滚动条，但我似乎找不到任何好的教程，而且我不想使用插件。我看过一些插件，但我的 JS 技能很难理解这些插件。

所以我正在寻找一个简单、基本和轻量级的滚动条，有人知道吗？

Answer 1

你的意思是这样的？

但这只是一个使用 jQuery UI 库的非插件概念：

演示

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;
}

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