🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

An AngularJS directive for infinite scroll in vanillaJs ES6. No jQuery required.

Plugins

Documentation

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]


You May Also Like