Lightweight and Custom Scrollbar For Pure Javascript | Sheepbar.js

Sheepbar is a lightweight, simple scrollbar in pure JavaScript that attaches a simple, easy-to-style slider to a DIV element that contains the large web content.

custom scrollbar css for div, beautiful scrollbar css jsfiddle, custom scrollbar js, custom horizontal scrollbar css

How to make use of it:

1. Put the main JavaScript file Sheepbar.js into the document:

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

2. Configure the Sheepbar and you are ready to go.

var Sheepbar = new Sheepbar();

3. Add the CSS class “Sheep Bar” to the scrollable DIV container.

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

4. Disable/enable the horizontal and vertical scroll bars.

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

5. Customize the scrollbar in 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;
}

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

Sleek Custom Scrollbar For DIV Container, Sheepbar Plugin/Github


See Demo And Download

Official Website(SzymonLisowiec): Click Here

This superior jQuery/javascript plugin is developed by SzymonLisowiec. For extra Advanced Usage, please go to the official website.

Share