node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »



Directives for infinite scroll in vanillaJs ES6.

Originaly from

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']);


  • 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


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">


If you find any issues , please report on the issue section of github or send a mail to