cy-infinite-scroll
Directives for infinite scroll in vanillaJs ES6. No jQuery required !
Originaly from http://shabeebk.com/blog/lazy-scroll-infinite-scrolling-angularjs-plugin
Demo
You can see a live demo
How to use ?
Install with bower
$ bower install --save cy-infinite-scroll
Install with npm
$ npm install --save cy-infinite-scroll
Include the file
<script type="text/javascript" src="yourPath/cyInfiniteScroll.min.js"></script>
And the module to your angular app
angular.module('myApp', ['cyInfiniteScroll']);
Parameters
-
infiniteScroll: function to execute when scroll
-
distance: this is an optional parameter to controll scroll trigger. This parameter can accept value ranging from 0 -100. For example if we mention 50 in this parameter, scroll function will called when mouse point reached on 50% of the screen.
-
disableScroll: this is an optional parameter to disable scroll. If true, the infiniteScroll function will not be execute
Example
In your controller:
function UserController($scope, UserService) { $scope.users = []; $scope.isLoading = false; $scope.getMoreUsers = getMoreUsers; function getMoreUsers() { $scope.isLoading = true; // getUser retreive the list of users from server UserService.getUser().then(res => { // do whatever you want $scope.isLoading = false; }); } } angular.module('myApp', ['cyInfiniteScroll']).controller('UserController', UserController);
In your html view:
<div infinite-scroll="getMoreUsers()" distance="80" disable-scroll="isLoading"> <div ng-repeat="user in users track by $index"> {{user.name}} </div> </div>
Issues
If you find any issues , please report on the issue section of github or send a mail to [email protected]