jQuery Based Scroll Indicator For Large Dataset - scrolli.js
File Size: | 6.74 KB |
---|---|
Views Total: | 677 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
scrolli.js is a jQuery plugin used for creating scroll indicators at the top and bottom of your scrollable area to indicate there is more content to scroll.
How to use it:
1. Import the latest version of jQuery and scrolli.js scripts into the webpage.
<script src="//code.jquery.com/jquery-3.1.0.slim.min.js"></script> <script src="dist/jquery.scrolli.js"></script>
2. Create the scrollable area with a vertical scrollbar.
<div class="scrolli"></div>
.scrolli { overflow-x : hidden; overflow-y : auto; }
3. Add the scroll indicators to the srollable container.
$.scrolli.add$List( $scrolling_divs );
4. Style the scroll indicators in the CSS.
.scrolli-btm-on { border-bottom-color : #EF476F; } .scrolli-top-on { border-top-color : #EF476F; }
5. Recalculate the scroll indicators when window resizes.
$.scrolli.recalc$All();
6. Remove the scroll indicators manually.
// Remove a scrollable area $.scrolli.rm$List( $others_divs ); // Remove all scrolli elements $.scrolli.reSet();
This awesome jQuery plugin is developed by mmikowski. For more Advanced Usages, please check the demo page or visit the official website.