What is lazy scrolling?
lazy-scroll is an angularjs directive for infinite scrolling. Instead of click pagination links or going to next page , this will help to load data on scrolling like you see in Facebook. lazy-scroll will work even without jquery .
Download lazy-scroll
minified version | uncompressed version
What you have to do to implement on angularjs project?
lazy-scroll is a simple directive for angularjs application. We just have to call the function which you want to call for pagination in lazy-scroll attribute.
It will magically load data and append into variable when user reaches bottom of the page. There are also API’s available to control the behavior.
Just see some demo samples.
Check out some Demo
Demo with explanation can see here
How do I use in my project?
You can download the minified version or you can use the cdn and follow the 3 simple steps below:
STEP 1 :
Add ascript at the bottom of the page after angularjs
<script src="path-to-script/angularjs.min.js"></script>
<script src="path-to-script/lazy-scroll.min.js"></script>
STEP 2:
Ensure that your application module specifies lazy-scroll as a dependency.
var app = angular.module("yourModule",['lazy-scroll']);
STEP 3:
Use the directive by specifying a lazy-scroll attribute on an element.
<div lazy-scroll="paginationFuntion()" lazy-scroll-trigger="80" >
That is it and it will work like a magic!
What is next?
Check our API here
See some demo and implement 🙂
4 total views