https://github.com/CaptainYouz/cy-infinite-scroll

Angular directive in VanillaJs for infinite scroll. No jQuery required !
https://github.com/CaptainYouz/cy-infinite-scroll

Last synced: 3 months ago
JSON representation

Angular directive in VanillaJs for infinite scroll. No jQuery required !

• Host: GitHub
• URL: https://github.com/CaptainYouz/cy-infinite-scroll
• Owner: CaptainYouz
• Created: 2016-01-25T10:13:21.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2016-02-19T17:28:19.000Z (over 8 years ago)
• Last Synced: 2024-07-10T09:32:42.930Z (4 months ago)
• Language: JavaScript
• Homepage: http://captainyouz.github.io/cy-infinite-scroll
• Size: 1.02 MB
• Stars: 8
• Watchers: 3
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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

```bash

$ bower install --save cy-infinite-scroll

```

### Install with npm

```bash

$ npm install --save cy-infinite-scroll

```

###

Include the file

```html

```

And the module to your angular app

```javascript

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:

```javascript

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:

```html



	


    	{{user.name}}

    



```


### Issues

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

[live demo]: