Sleek Custom Scrollbar For DIV Container – Sheepbar.js

Sheepbar.js is a pure JavaScript custom scrollbar solution that appends a simple, easy-to-style scrollbar to your DIV element containing large web content.

How to use it:

Place the main JavaScript file Sheepbar.js in the document:

<script src="sheepbar.js"></script>

Initialize the Sheepbar and you’re ready to go.

var Sheepbar = new Sheepbar();

Add the CSS class ‘sheepbar’ to your scrollable DIV container.

<div class="sheepbar">
  ...
</div>

Disable / enable horizontal & vertical scrollbars.

<div class="sheepbar"
     data-x="true" 
     data-y="true">
  ...
</div>

Customize the scrollbar in the CSS as shown below:

.sheepbar>.sheepbar-scrollbar>div {
  width: 100%;
  height: 96%;
  top: 2%;
  bottom: 2%;
  left: 0;
  position: absolute;
  border-radius: 6px;
  background: #34495e;
  opacity: 0.52;
  transition: opacity 0.2s;
  cursor: pointer;
}
.sheepbar>.sheepbar-scrollbar.sheepbar-x>div {
  width: 96%;
  height: 100%;
  right: 2%;
  bottom: 0;
  left: 2%;
}
.sheepbar>.sheepbar-scrollbar>div:hover, .sheepbar>.sheepbar-scrollbar>div:active { opacity: 0.88; }
.sheepbar>.sheepbar-scrollbar.sheepbar-x {
  height: 6px;
  bottom: 2px;
}
.sheepbar>.sheepbar-scrollbar.sheepbar-y {
  width: 6px;
  right: 2px;
}
.sheepbar .sheepbar-content {
  padding: 0 12px 0 12px;
}

Available customization options and callback functions.

var Sheepbar = new Sheepbar({
    // CSS position
    position: 'relative',
    // Callbacks
    callback_scroll: function(){},
    callback_mousedown: function(){},
    callback_mouseup: function(){},
    callback_mousemove: function(){},
    callback_resize: function(){}
    
});