Endless scrolling for AngularJS by
1 person uses it
Author: 278582?v=3 Bram77
Submitted by: 278582?v=3 Bram77


Endless scrolling for AngularJs

An AngularJs directive by Bram van Oploo ->


This module has been inspired by sroze his ngInfiniteScroll module. It wasn't working in my project and I found his code a bit over complicated for the task. Less code == less issues. That's why I've created my own version. No code from his project has been used, whatsoever.


  • Just download the project via Download ZIP button or use Bower:

  • Now add the script tag to your page. My module's only dependency is AngularJs itself (where ngInfiniteScroll also requires jQuery):


  • Inject suEndlessScroll dependency into your AngularJs application:

  • Add the directive to your HTML element (ng-init="init()" populates the scrollItems array for the first time):

    The wrapper needs a css property overflow: auto; or overflow-y: auto; and a height: or max-height: needs to be specified. Alternatively you can position: the element absolute or fixed. Then a height specification is not required.

  • Create the su-endless-scroll callback method in your controller (let's call it loadMore):


  • su-endless-scroll function (required)

    This is the main attribute and takes the callback method from your controller as a value

  • su-endless-scroll-offset integer (default 30; optional)

    The number off pixels offset from the bottom of your wrapper from which the callback method will be triggered.

  • su-endless-scroll-auto-check boolean (default true; optional)

    If the height of the initial content coincedentally is exactly the height of the container scrolling will not be possible, even if more content is available. Enableling this option will solve this within one second.

comments powered by Disqus
This page was last updated about 3 years ago.