Create A Fancy Custom Scrollbar with jQuery and CSS3 - Phancy Scroll
File Size: | 8.6 KB |
---|---|
Views Total: | 6476 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Just another jQuery plugin to create a fancy scrollbar that will only appear once you hover over the scrollable area. Fully customizable via CSS and has Right-to-Left language support.
How to use it:
1. Include the latest version of jQuery library and jQuery Phancy Scroll plugin at the bottom of the document.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="jquery.phancy.js"></script>
2. Call the plugin on a container element. The plugin will convert the container into a scrollable area with a custom scrollbar.
<script> $(function() { $( "#demo" ).customScroll(); }); </script>
3. The CSS to style the scrollbar. Change the styles as you want.
.phancy-scrollbar { width: 5px; border-radius: 4px; top: 0; position: absolute; background: #ccc; -moz-transition: opacity .2s; -webkit-transition: opacity .2s; -o-transition: opacity .2s; -ms-transition: opacity .2s; transition: opacity .2s; -webkit-transition-delay: 1s; opacity: 0; } .phancy-scroller .phancy-scrollbar:active, .phancy-scroller:hover .phancy-scrollbar { opacity: 1; -webkit-transition-delay: 0s; } .phancy-scrollbarbutton { width: 100%; border-radius: 4px; top: 0; position: absolute; background-color: #999; }
This awesome jQuery plugin is developed by dereli. For more Advanced Usages, please check the demo page or visit the official website.