JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js"></script>
<script src="http://www.nancarrow.com/assets/js/ui-scroll-2015-07-30.js"></script>
<div ng-app="scrollerTestApp" ng-controller="ScrollerController">
<div class="imageCell" ui-scroll="movie in movieDataSource">
<img ng-src="{{movie.imageURL}}" title="{{movie.description}}"/>
</div>
</div>
CSS
body {
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
}
.imageCell {
float: left;
padding: 4px;
display: block;
width: 100px;
height: 100px;
}
.scrollerViewport {
position: fixed;
top: 0;
bottom:0;
}
JavaScript
var appModule = angular.module('scrollerTestApp', ['ui.scroll'])
.controller('ScrollerController', ['$scope', function($scope) {
$scope.movieDataSource = {
get : function (index, count, callback) {
var i, items = [], item;
var min = 1;
var max = 100;
for (i=index ; i<index + count ; i++) {
if(i < min || i > max) {
continue;
}
item = {
description: "Item : " + i,
imageURL: "http://placehold.it/96x96&text=" + i
};
items.push (item);
}
callback (items);
}
}
}]);