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.

•  Support for mobile devices
•  Slimming and optimization
•  Maybe more optymalization

Must Read: Minimalistic Custom Slider Scrollbar Plugin | Perfect slider

Simple Scrollbar In Pure Javascript

Simple CSS

• .sheepbar>.sheepbar-scrollbox – Container of content
• .sheepbar>.sheepbar-scrollbox>.sheepbar-content – Content
• .sheepbar>.sheepbar-scrollbar – Container of scrollbar pointer
• .sheepbar>.sheepbar-scrollbar>div – Scrollbar pointer

Options

• position – CSS position (Have to be absolute, relative, or fixed). [string] [Default: relative]
• callback_scroll – callback of event “scroll” [function] [Default: empty function]
• callback_mousedown – callback of event “mousedown” [function] [Default: empty function]
• callback_mouseup – callback of event “mouseup” [function] [Default: empty function]
• callback_mousemove – callback of event “mousemove” [function] [Default: empty function]
• callback_resize – callback of event “resize” [function] [Default: empty function]

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.

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

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.