node package manager

cy-infinite-scroll

CyInfiniteScroll

Directives for infinite scroll in vanillaJs ES6.

Originaly from http://shabeebk.com/blog/lazy-scroll-infinite-scrolling-angularjs-plugin

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