Cross-browser Custom Scrollbar Plugin For jQuery - scrollBar.js
File Size: | 6.02 KB |
---|---|
Views Total: | 15524 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.