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

您可以将其转换为插件并改进代码。我认为这是一个好的开始。

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

1 个答案: