javascript - jqueryでスクロールバーを構築する簡単な方法を探しています

Question

jqueryでスクロールバーを作成するための基本的で簡単な方法を探していますが、良いチュートリアルが見つからないようで、プラグインを使用したくありません。私はいくつかのプラグインを見てきましたが、私のJSスキルはこれらのプラグインを理解するには不十分です。

だから私はシンプルで基本的で軽量なスクロールバーを探しています、誰かアイデアはありますか？

Answer 1

このような意味ですか？

ただし、jQueryUIライブラリを使用するのはプラグイン以外の概念にすぎません。

デモ

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

あなたはそれをプラグインに変えてコードを改善するために遊ぶことができます。
良いスタートだと思います。