feat(Scrolling): Adding support for a custom scroller. (#5859)

Adding support for providing a custom scroller and a new scroller that makes touch devices scroll without a lag between various pieces of the grid.

#1689, #3719, #5833

Author: mportuga

grunt/karma.js

@@ -3,7 +3,7 @@ var util = require('../lib/grunt/utils.js');
 module.exports = function( grunt ){
   var baseConfig = {
     options: {
-      configFile: 'test/karma.debug.conf.js',
+      configFile: 'test/karma.conf.js',
       background: true,
     },
     // dev: {

misc/tutorial/407_custom_scrolling.ngdoc

@@ -0,0 +1,59 @@
+@ngdoc overview
+@name Tutorial: 407 Custom Scrolling
+@description
+
+<div class="alert alert-info" role="alert"><strong>Note</strong> It is highly recommended that you turn this feature on alongside pinning, especially
+if you plan on using ui-grid on devices.</div>
+
+The custom scrolling feature takes over the default scrolling logic in order to ensure that grid scrolling works without a lag on devices.
+To enable, you must include the 'ui.grid.customScrolling' module and you must include the ui-grid-custom-scrolling directive on your grid element.
+
+Documentation for the custom scrolling feature is provided in the api documentation, in particular:
+
+- {@link api/ui.grid.customScrolling.constant:uiGridScrollerConstants uiGridScrollerConstants}
+- {@link api/ui.grid.customScrolling.service:uiGridScroller uiGridScroller}
+- {@link api/ui.grid.customScrolling.directive:uiGridCustomScrolling uiGridCustomScrolling}
+
+@example
+<example module="app">
+  <file name="app.js">
+    var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.pinning', 'ui.grid.customScrolling']);
+
+    app.controller('MainCtrl', ['$scope', '$http', '$log', function ($scope, $http, $log) {
+      $scope.gridOptions = {};
+
+      $scope.gridOptions.columnDefs = [
+        { name:'id', width:50, enablePinning:false },
+        { name:'name', width:100, pinnedLeft:true },
+        { name:'age', width:100, pinnedRight:true  },
+        { name:'address.street', width:150  },
+        { name:'address.city', width:150 },
+        { name:'address.state', width:50 },
+        { name:'address.zip', width:50 },
+        { name:'company', width:100 },
+        { name:'email', width:100 },
+        { name:'phone', width:200 },
+        { name:'about', width:300 },
+        { name:'friends[0].name', displayName:'1st friend', width:150 },
+        { name:'friends[1].name', displayName:'2nd friend', width:150 },
+        { name:'friends[2].name', displayName:'3rd friend', width:150 },
+      ];
+
+      $http.get('/data/500_complex.json')
+        .success(function(data) {
+          $scope.gridOptions.data = data;
+        });
+    }]);
+  </file>
+  <file name="index.html">
+    <div ng-controller="MainCtrl">
+      <div ui-grid="gridOptions" class="grid" ui-grid-pinning ui-grid-custom-scrolling></div>
+    </div>
+  </file>
+  <file name="main.css">
+    .grid {
+      width: 100%;
+      height: 400px;
+    }
+  </file>
+</example>