https://github.com/kyuff/infinite-scroll

AngularJS module which allows for infinite scrolling elements.
https://github.com/kyuff/infinite-scroll

Last synced: 12 days ago
JSON representation

AngularJS module which allows for infinite scrolling elements.

• Host: GitHub
• URL: https://github.com/kyuff/infinite-scroll
• Owner: kyuff
• Created: 2013-07-09T19:37:01.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2013-07-10T08:55:52.000Z (over 11 years ago)
• Last Synced: 2024-04-16T18:23:38.315Z (7 months ago)
• Size: 121 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
### Infinite Scroller for AngularJS

Module that allows for infinite scrolling of an element.

It works by recentering once the scrolling gets to a 20% bounds of it's size.

This way, the module will not add more elements to the HTML as you scroll.

### Example

Setup your Application and depend on kyuffScroll

```javascript

    var App = angular.module("App", ["kyuffScroll"]);

    App.controller("Ctrl", function Ctrl() {

        var today = new Date(),

            miliToDayFactor = 1000*60*60*24;

        // today is offset = 0 and offset in days

        this.getDate = function (offset) {

            return new Date(today.getTime() + offset*miliToDayFactor)

        }

    });

```

In your HTML you can use the kyuff-scroll directive and pass in the size of the scroller.

The scroller will create elements in the positive and negative range and center around zero.

You can use the *isOffset* scope variable inside the scroller element.

```html



    


        {{ ctrl.getDate(isOffset) | date }}

    



```


Add some styles to make the scroller have a scrollbar

```css

        div.content {

            padding: 50px;

            margin: 50px;

            max-height: 400px;

            width: 150px;

            overflow-y: scroll;

            border: 1px solid black;

            border-radius: 5px;

            text-align: center;

        }

```

For webkit you can even hide the scrollbar

```css

        div.content::-webkit-scrollbar {

            width: 0 !important

        }

```