AngularJS module which allows for infinite scrolling elements.

Added by: Sam Deering





Stars: 0

Watchers: 0

Forks: 0

Module Description

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.


Setup your Application and depend on kyuffScroll

    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.

<div ng-controller="Ctrl as ctrl">
    <div id="scroller" class="content" kyuff-scroll="50">
        {{ ctrl.getDate(isOffset) | date }}

Add some styles to make the scroller have a scrollbar

        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

        div.content::-webkit-scrollbar {
            width: 0 !important

Module stats last updated: 2015-04-19 02:15:34

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!