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 captainyouz@gmail.com