Scrollbar

by Santosh Thakur

HTML

<div class="parent">
  <div class="scrollbar"></div>
  <div class="scrollContent">
    <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: 100px;
  width: 180px;
  background: #ddd;
}

.scrollContent {
  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: #fc0;
  width: 7px;
  border-radius: 5px;
}

JavaScript

var $scrollable = $('.scrollContent');
  var $scrollbar = $('.scrollbar');
  $scrollable.outerHeight(true);
  var H = $scrollable.outerHeight(true);
  var sH = $scrollable[0].scrollHeight;
  var sbH = H * H / sH;

  $('.scrollbar').height(sbH);
  
  $('.scrollbar').mousedown(function clickM(sbH){
   $scrollable.css({
      top: $scrollable.scrollTop() / H * sbH
    });
  })
  
  $scrollable.scroll(function() {
    $scrollbar.css({
      top: $scrollable.scrollTop() / H * sbH
    });
  });