Cross-browser Custom Scrollbar Plugin For jQuery - scrollBar.js

scrollBar.js is a jQuery plugin for adding custom scrollbars to your scrollable container in the non-Webkit browsers. For Webkit browsers (e.g. Safari, Chrome), I recommend you to use ::-webkit-scrollbar CSS pseudo-element to change the style of the scrollbar of an element you specify.

How to use it:

1. Add references to jQuery library and the jQuery scrollBar.js script:

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="scrollBar.js"></script>

2. Call the function scrollBox() on your scrollable container and done.

<div class="sb-container myContainer">
  Content here
</div>

$(".myContainer").scrollBox();

3. Customize the style of the scrollbar in the CSS:

.sb-container {
  position: relative;
  overflow: hidden;
  padding-right: 10px;
}

.sb-content {
  height: 100%;
  width: 120%;
  padding-right: 20%;
  overflow-y: scroll;
  box-sizing: border-box;
}

.sb-scrollbar-container {
  position: absolute;
  right: 5px;
  bottom: 5px;
  top: 5px;
  width: 10px;
}

.sb-scrollbar-container-hide { right: -20px; }

.sb-scrollbar {
  position: absolute;
  right: 0;
  height: 30px;
  width: 10px;
  border-radius: 10px;
  background: rgba(50, 50, 50, 0.5);
}

.sb-scrollbar:hover { background: rgba(0, 0, 0, 0.5); }

4. For dynamic content:

$(window).trigger("resize.scrollBox");

---

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