Scroll till you drop

What?

Provide access to scrollable lists of unlimited length.

Items can be of any complexity and can vary in any possible way. They are dynamically instantiated as they become visible and $destroyed as they are scrolled out of view.

{{$index + ' ' + item}}

Why?

The common way to present to the user a list of data elements of undefined length is to start with a small portion at the top of the list - just enough to fill the space on the page. Additional rows are appended to the bottom of the list as the user scrolls down the list.

Unfortunately, even though rows at the top of the list become invisible as they scroll out of the view, they are still a part of the page and still consume resources. As the user scrolls down the list grows and the web app slows down.

read more...

How?

If all you want to use the entire window as the viewport, all you need is this:

<div ui-scroll="item in datasource">{{item}}</div>

If you want to control the viewport yourself you can do it like this:

<div ui-scroll-viewport style="height:200px;" >
   <div ui-scroll="item in datasource">{{item}}</div>
</div>

Make sure that you always constrain the height of your viewport