javascript - 寻找一种简单的方法来构建带有jquery的滚动条

Closed. This question needs to be more focused。它当前不接受答案。
                            
                        
                    
                
            
                    
                
                        
                            
                        
                    
                        
                            想改善这个问题吗？更新问题，使其仅通过editing this post专注于一个问题。
                        
                        5年前关闭。
                    
                
        

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

所以我正在寻找一个简单，基本，轻巧的滚动条，有人有想法吗？

最佳答案

你的意思是这样的吗？

但这只是使用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;
}

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