jQuery Based Scroll Indicator For Large Dataset - scrolli.js

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.