CSS-stylable Custom Scrollbar Plugin With jQuery - csb.js

csb.js is a simple jQuery plugin used to create CSS styleable custom scrollbars that will auto reveal when you start scrolling/swiping within the scrollable area. If your browser/OS is configured to not show scrollbars, the new scrollbars will NOT be applied.

How to use it:

1. Load the stylesheet csb.css for the default styles of the custom scrollbar.

<link rel="stylesheet" href="csb.min.css">

2. Load jQuery library and the JavaScript csb.js into your html document when needed.

<script src="//code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="jquery.csb.min.js"></script>

3. Call the jQuery function named 'customScrollBar' to convert a DIV container into a scrollable area. Note that the DIV container must have a height.

var $elem = $('#scroll');
/* CSB returns an object, for this demo, store it in the window context */
window.csb = $elem.customScrollBar();

4. This function returns an object with three functions:

• getScrollbarWidth: Returns the scrollbarwidth for the current browser.
• update: Updates the sizing of the scrollbars. Use this if the node has been changed with the scrollbar active.
• cleanNode: Clean the scrollbar from the node, returning it to it's original state.

5. Override the default scrollbar styles in the csb.css:

.csb-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}

.csb-wrap.unselectable {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* Scrollbar track */

.csb-track {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 8px;
  cursor: pointer;
  overflow: hidden;
}

/* Scrollbar handle */

.csb-drag {
  opacity: 0;
  position: absolute;
  left: 0;
  right: 0;
  cursor: pointer;
  border-radius: 4px;
  background: #EEEEEE;
  border: 1px solid rgb(80,80,80);
  border-color: rgba(80,80,80,0.3);
  transition: opacity 0.3s ease-in;
  -webkit-transition: opacity 0.3s ease-in;
}

.csb-drag.visible { opacity: 1; }

---

This awesome jQuery plugin is developed by AbygailG. For more Advanced Usages, please check the demo page or visit the official website.