<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angularjs@1.5.3" data-semver="1.5.3" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="https://rawgit.com/klumba12/vscroll/master/vscroll.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body ng-controller="vscrollList">
<div vscroll style="height: 120px; width: 100%; overflow-x: auto; white-space: nowrap;">
<div vscroll-port-x="vscrollContext" style="height: 100px;">
<div vscroll-column="{{::$index}}" ng-repeat="item in data | vscroll: vscrollContext track by $index" style="display: inline-block;color: #{{item.color}}; height: 100%;background-color: #{{item.code}}; width: {{item.width}}px;">
</div>
</div>
</div>
<script language="javascript">
var app = angular.module('app', ['vscroll']);
app.controller('vscrollList', ['$scope', 'vscroll', '$timeout', function($scope, vscroll, $timeout) {
$scope.data = [];
$scope.vscrollContext = vscroll({
threshold: 32,
fetch: function(skip, take, d) {
for (var i = skip; i < skip + take; i++) {
var code = Math.floor(Math.random() * 16777215);
$scope.data[i] = {
width: 1 + Math.round(Math.random() * 100),
code: code.toString(16),
};
}
d.resolve($scope.data.length + 32);
}
});
}]);
</script>
</body>
</html>