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 as c" ui-scroll-viewport class="scrollerViewport">
	<div class="imageCell" ui-scroll="item in imageDataSource" adapter="imageDataSourceAdapter" buffer-size="10">
		<img ng-src="{{item.imageURL}}" title="{{item.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', '$log', function($scope, $log) {
         
        var self = this;
		$scope.imageDataSourceAdapter = {};
         
		$scope.imageDataSource = {
			get : function (index, count, callback) {
				var i, items = [], item;
	
				$log.info ("data source get : index=" + index + ", count=" + count);

				// Catch cases where all requested items are below our lower limit
				if (index + count <= 1) {
					callback ([]);
					return;
				}
	
				// Limit to items# >= 1
				if (index < 1)
					index = 1;
	
				for (i=index ; i<index + count ; i++) {
					item = {
						description: "Item : " + i,
						imageURL: "http://placehold.it/96x96&text=" + i
					};
					items.push (item);
				}
				callback (items);
			}
		}
	}]);