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 should I move a content by moving other div element (scrollbar) and also how should I move content by using mouse scroller??

Please help me to understand this.

Thanks

I didn't tried any available plugin, I just want to make my own so before starting, idea should be clear that what's the concept/logic behind it, if its clear then I can start to build one. — Dheeraj Agrawal, Mar 05 '12 at 06:16

Roko C. Buljan · Accepted Answer · 2022-10-21T16:51:51.080

Scrollbars logic

(onInit, onResize) thumbSize = viewportSize * viewportSize / areaSize
(onThumbDrag)      viewportScrollPos = areaSize / viewportSize * thumbPos
(onViewportScroll) thumbPos = viewportScrollPos / viewportSize * thumbSize

The easiest concept would be to use the jQuery UI draggable and attach the .draggable() Method to the .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.

this is g8, really g8 and soon you will see the plugin, need to apply many more things into this, but I will try to do that.. Thank you so much :) — Dheeraj Agrawal, Mar 05 '12 at 07:43
Hi roXon, how can I make this work by scrolling with mouse-wheel? — jeewan, Oct 11 '12 at 18:31

Arshid KV · Answer 2 · 2016-07-10T16:22:08.760

Make custom scrollbar without 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 });
});

How to make custom scrollbar jQuery plugin

2 Answers2

Scrollbars logic

Linked