iOS Style Custom Browser Scrollbar with jQuery and CSS

File Size: 13.5 KB
Views Total: 2622
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></script>
<script src="//"></script>

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

<script src="//"></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() {

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:


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


  • 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.