feat(Grid Scrolling): Adds the ability to overwrite default grid scroll event. (#5841)

Creating a wrapper service that takes over the default scrolling logic in order to ensure that grid

scrolling works well in devices. Also, adds the ability to the grid to allow users to provide their

own custom scrolling.

Author: mportuga

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>