Sleek Custom Scrollbar For DIV Container – Sheepbar.js

Category: Javascript | January 11, 2017
Views Total:1,525 views
Official Page:Go to website
Last Update:January 11, 2017


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

Disable / enable horizontal & vertical scrollbars.

<div class="sheepbar"

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(){}

You Might Be Interested In:

Leave a Reply