jQuery 如何制作自定义滚动条jQuery插件

How to make custom scrollbar jQuery plugin

提问by Dheeraj Agrawal

I was thinking to make custom scrollbar jQuery plugin, there are many plugins available for it but I want to make my own, problem is I am not getting the concept that how should I move a content by moving other div element (scrollbar) and also how should I move content by using mouse scroller??

我正在考虑制作自定义滚动条 jQuery 插件，有很多插件可用，但我想制作自己的插件，问题是我不明白我应该如何通过移动其他 div 元素（滚动条）来移动内容以及我应该如何使用鼠标滚动条移动内容？

Please help me to understand this.

请帮助我理解这一点。

Thanks

谢谢

回答by Roko C. Buljan

The easiest concept would be to use the jQuery UI draggable and attach the .draggable()Method to the .scrollbar

最简单的概念是使用 jQuery UI 可拖动并将.draggable()方法附加到.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>

The above is just an example with the needed logic and math involved,
it misses the "hide-scrollbar", just to keep it simple. I'll leave to you to add all the needed tweaks, addons.

上面只是一个涉及所需逻辑和数学的例子，
它忽略了“隐藏滚动条”，只是为了简单起见。我会让你添加所有需要的调整，插件。

回答by Arshid KV

Make custom scrollbar without jQuery-UI.

制作没有 jQuery-UI 的自定义滚动条。

HTML:-

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:-

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:-

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