Random height list virtualization

<!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:300px; width: 100%; overflow-y: auto;">
      <ul vscroll-port-y="vscrollContext" style="list-style: none;margin:0;padding:0;">
         <li vscroll-row="{{::$index}}" ng-repeat="item in data | vscroll: vscrollContext track by $index" style="color: #{{item.color}}; width: 100%; height: {{item.height}}px; background-color: #{{item.code}}">
            {{item.height}}px: #{{item.code}}
         </li>
      </ul>
   </div>

   <script language="javascript">
      var app = angular.module('app', ['vscroll']);
      app.controller('vscrollList', ['$scope', 'vscroll', function($scope, vscroll) {
         $scope.data = [];

         var isLight = function(hexcolor) {
            var r = (hexcolor >> 16) & 0xFF,
               g = (hexcolor >> 8) & 0xFF,
               b = hexcolor & 0xFF;

            var a = 1 - (0.299 * r + 0.587 * g + 0.114 * b) / 255;
            return (a < 0.5);
         };

         for (var i = 0; i < 200; i++) {
            var code = Math.floor(Math.random() * 16777215);
            $scope.data[i] = {
               height: 20 + Math.round(Math.random() * 100),
               code: code.toString(16),
               color: isLight(code) ? '000' : 'fff'
            };
         }

         $scope.vscrollContext = vscroll({
            threshold: 30
         });

      }]);
   </script>
</body>

</html>