カスタムスクロールバーjQueryプラグインを作成しようと考えていましたが、多くのプラグインが利用可能ですが、自分自身で作成したいのですが、問題を解決できません。他のdiv要素(スクロールバー)を移動して、マウスのスクロールを使用してコンテンツをどのように移動する必要がありますか?カスタムスクロールバーjQueryプラグインの作成方法
ご理解ください。
おかげ
カスタムスクロールバーjQueryプラグインを作成しようと考えていましたが、多くのプラグインが利用可能ですが、自分自身で作成したいのですが、問題を解決できません。他のdiv要素(スクロールバー)を移動して、マウスのスクロールを使用してコンテンツをどのように移動する必要がありますか?カスタムスクロールバーjQueryプラグインの作成方法
ご理解ください。
おかげ
最も簡単な概念は、jQueryのUIがドラッグを使用し、上記.scrollbar
var $scrollable = $(".scrollable"),
$scrollbar = $(".scrollbar"),
height = $scrollable.outerHeight(true), // visible height
scrollHeight = $scrollable.prop("scrollHeight"), // total height
barHeight = height * height/scrollHeight; // Scrollbar height!
// Scrollbar drag:
$scrollbar.height(barHeight).draggable({
axis : "y",
containment : "parent",
drag: function(e, ui) {
$scrollable.scrollTop(scrollHeight/height * ui.position.top );
}
});
// Element scroll:
$scrollable.on("scroll", function() {
$scrollbar.css({top: $scrollable.scrollTop()/height * barHeight });
});
.parent{
position:relative;
overflow:hidden;
height:200px;
width:180px;
background:#ddd;
}
.scrollable{
overflow-y:scroll;
position:absolute;
padding:0 17px 0 0;
width: 180px;
height:100%;
}
.scrollbar{
cursor:n-resize;
position:absolute;
overflow:auto;
top:0px;
right:0px;
z-index:2;
background:#444;
width:17px;
border-radius:8px;
}
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
<div class="parent">
<div class="scrollbar"></div>
<div class="scrollable">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non nunc eget sapien molestie mollis. Proin vestibulum vehicula varius. Duis a nunc ac risus facilisis consectetur.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non nunc eget sapien molestie mollis. Proin vestibulum vehicula varius. Duis a nunc ac risus facilisis consectetur.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non nunc eget sapien molestie mollis. Proin vestibulum vehicula varius. Duis a nunc ac risus facilisis consectetur.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non nunc eget sapien molestie mollis. Proin vestibulum vehicula varius. Duis a nunc ac risus facilisis consectetur.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non nunc eget sapien molestie mollis. Proin vestibulum vehicula varius. Duis a nunc ac risus facilisis consectetur.
</div>
</div>
に.draggable()
方法を添付することですが必要との単なる一例です論理と数学が含まれて、
それは単純なままにするために、 "非表示のスクロールバー"が欠けている。私は必要な調整、アドオンを追加するためにあなたに残します。
これはg8です。本当にg8です。すぐにプラグインが表示されますので、もっと多くのことをこのプラグインに適用する必要があります。 ありがとうございます。 –
@Dheerajはあなたのスクリプト!がんばろう! –
こんにちは、私はマウスホイールでスクロールしてこの作業を行うことができますか? – jeewan
カスタムスクロールバーを作成するjQuery-UIなし、。
HTML: -
<div class="parent">
<div class="scrollbar"></div>
<div class="scrollable">
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Cras non nunc eget sapien molestie mollis.
Proin vestibulum vehicula varius. Duis a nunc ac risus facilisis consectetur.</p>
</div>
</div>
CSS: -
.parent{
position:relative;
margin:50px;
overflow:hidden;
height:200px;
width:180px;
background:#ddd;
}
.scrollable{
overflow-y:scroll;
position:absolute;
padding:0 17px 0 0;
width: 180px;
height:100%;
}
.scrollbar{
position:absolute;
overflow:auto;
top:0px;
right:0px;
z-index:2;
background:#444;
width:7px;
border-radius:5px;
}
Javascriptを: -
var $scrollable = $('.scrollable');
var $scrollbar = $('.scrollbar');
$scrollable.outerHeight(true);
var H = $scrollable.outerHeight(true);
var sH = $scrollable[0].scrollHeight;
var sbH = H*H/sH;
$('.scrollbar').height(sbH);
$scrollable.on("scroll", function(){
$scrollbar.css({top: $scrollable.scrollTop()/H*sbH });
});
私は、利用可能なプラグインを試していなかった、ちょうど私ワ始める前に私自身を作るためには、アイデアが明確であれば、その背後にある概念/論理は何か、それが明確であればビルドを開始することができるはずです。 –