Endless scrolling for AngularJs
An AngularJs directive by Bram van Oploo -> http://sudo-systems.com
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-y: auto;and a
max-height:needs to be specified. Alternatively you can
fixed. Then a height specification is not required.
Create the su-endless-scroll
callbackmethod in your controller (let's call it
This is the main attribute and takes the callback method from your controller as a value
The number off pixels offset from the bottom of your wrapper from which the callback method will be triggered.
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.