JSFiddle - React, Tailwind, and code Playground

by Sergio Batista

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
  <div ng-controller="mainController as vm">

    <h2>ui.scroll, with "controller as" float items demo</h2>
    <div class="top-breaker"></div>

    <div ui-scroll="itemArray in vm.datasource" top-visible-scope="topVisible" buffer-size="6">
      <div ng-repeat="item in itemArray" class="imageCell">
        <img ng-src="{{item.imageURL}}" title="{{item.description}}" />
      </div>
    </div>

  </div>

CSS

body {
  margin: 0;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
}
h2 {
  position:fixed;
  line-height: 50px;
  vertical-align: middle;
  text-align: center;
  width: 100%;
  padding: 0;
  margin: 0;
  background-color: lightblue;
}
.top-breaker {
  height: 50px;
  width: 100%;
}
.imageCell {
  float: left;
  height: 100px;
  width: 100px;
}

JavaScript

/*!
 * angular-ui-scroll
 * https://github.com/angular-ui/ui-scroll.git
 * Version: 1.5.1 -- 2016-06-27T18:18:39.277Z
 * License: MIT
 */
! function() {
  "use strict";
  var a = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(a) {
    return typeof a
  } : function(a) {
    return a && "function" == typeof Symbol && a.constructor === Symbol ? "symbol" : typeof a
  };
  angular.module("ui.scroll", []).directive("uiScrollViewport", function() {
    return {
      restrict: "A",
      controller: ["$log", "$scope", "$element", function(a, b, c) {
        var d = this;
        d.container = c, d.viewport = c, angular.forEach(c.children(), function(a) {
          "tbody" === a.tagName.toLowerCase() && (d.viewport = angular.element(a))
        })
      }]
    }
  }).directive("uiScroll", ["$log", "$injector", "$rootScope", "$timeout", "$q", "$parse", function(b, c, d, e, f, g) {
    function h(a, b) {
      return b.after(a), []
    }

    function i(a) {
      return a.element.remove(), a.scope.$destroy(), []
    }

    function j(b, c) {
      if (!p) return h(b, c);
      if (q) {
        var d = function() {
          var a = f.defer();
          return p.enter(b, null, c, function() {
            return a.resolve()
          }), {
            v: [a.promise]
          }
        }();
        if ("object" === ("undefined" == typeof d ? "undefined" : a(d))) return d.v
      }
      return [p.enter(b, null, c)]
    }

    function k(b) {
      if (!p) return i(b);
      if (q) {
        var c = function() {
          var a = f.defer();
          return p.leave(b.element, function() {
            return b.scope.$destroy(), a.resolve()
          }), {
            v: [a.promise]
          }
        }();
        if ("object" === ("undefined" == typeof c ? "undefined" : a(c))) return c.v
      }
      return [p.leave(b.element).then(function() {
        return b.scope.$destroy()
      })]
    }

    function l(a) {
      var b =...