How to make custom scrollbar jQuery plugin

Question

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 sh

Answer 1

Make custom scrollbar without jQuery-UI .

HTML:-

    

            

            

                 
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.
 
           
   

css:-

.parent{
    position:relative;
       margin:50px;
      overflow:hidden;
    height:200px;
    width:180px;
    background:#ffffd;
}
.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 });
});