iOS Style Custom Browser Scrollbar with jQuery and CSS

Just another jQuery & jQuery UI plugin that replaces the default browser scrollbar with your own styles.

How to use it:

1. Include the necessary jQuery and jQuery UI in your web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

2. Include the jQuery mousewheel plugin to add mouse wheel support.

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.11/jquery.mousewheel.min.js"></script>

3. Include the jQuery scrollbar plugin after jQuery library.

<script src="scrollbar-plugin.js"></script>

4. Initialize the plugin to active the custom browser scrollbar.

$(function() {
  $.scrollbar();
});

5. Add your own styles to the browser scrollbar.

.scrollbar-track {
  position: fixed;
  right: 0px;
  top: 0px;
  width: 20px;
  height: 100%;
  background: transparent
}

.scrollbar {
  position: fixed;
  right: 0px;
  width: 20px;
  background-color: rgba(255, 255, 255, 0.5);
  border: 5px solid transparent;
  background-clip: content-box;
  border-radius: 10px
}

.scrollbar:hover { background-color: rgba(255, 255, 255, 0.75); }

Change log:

2014-10-08

• Added black version (scrollbar-black.css), for lighter pages.

2014-10-05

• fixed 2 bugs.

---

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