This time I will share jQuery Plugin and tutorial about jQuery Based Scroll Indicator For Large Dataset – scrolli.js, hope it will help you in programming stack.
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.
1 |
<script src="//code.jquery.com/jquery-3.1.0.slim.min.js"></script> |
2 |
<script src="dist/jquery.scrolli.js"></script> |
2. Create the scrollable area with a vertical scrollbar.
1 |
<div class="scrolli"></div> |
3. Add the scroll indicators to the srollable container.
1 |
$.scrolli.add$List( $scrolling_divs ); |
4. Style the scroll indicators in the CSS.
1 |
.scrolli-btm-on { border-bottom-color : #EF476F; } |
3 |
.scrolli-top-on { border-top-color : #EF476F; } |
5. Recalculate the scroll indicators when window resizes.
1 |
$.scrolli.recalc$All(); |
6. Remove the scroll indicators manually.
2 |
$.scrolli.rm$List( $others_divs ); |
This awesome jQuery plugin is developed by mmikowski. For more Advanced Usages, please check the demo page or visit the official website.
