fix(Grid): Force scroll to 100% when necessary

Containers that have overflow: hidden set are not able to naturally scroll
to 100%, because they cannot handle native scroll events; only mousewheel. It's a long discussion; see #3772 for notes.

This change catches a mousewheel event that should put the container at
the max scroll position (basically scrollHeight - offsetHeight) and
manually sets the scrollTop to that amount.

Fixes #3772

Author: c0bra

misc/demo/pinning.html

@@ -9,7 +9,7 @@
     <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" />
     <link href="/dist/release/ui-grid.css" rel="stylesheet">
 
-    <!--<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>-->
+    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
     <script src="/lib/test/angular/1.2.26/angular.js"></script>
     <script src="/dist/release/ui-grid.js"></script>
 
@@ -45,7 +45,9 @@ <h2>Grid</h2>
 <script>
     var app = angular.module('test', ['ui.grid', 'ui.grid.pinning', 'ui.grid.resizeColumns']);
     app.controller('Main', function($scope, $http) {
-        $scope.gridOptions = {};
+        $scope.gridOptions = {
+          rowHeight: 45
+        };
         $scope.gridOptions.columnDefs = [
             { name:'id', width:50 },
             { name:'name', width:100, pinnedLeft:true },
@@ -65,7 +67,7 @@ <h2>Grid</h2>
 
         $http.get('https://rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
                 .success(function(data) {
-                    $scope.gridOptions.data = data;
+                    $scope.gridOptions.data = data.slice(0, 50);
                 });
     });
 </script>

src/js/core/directives/ui-grid-render-container.js

@@ -74,10 +74,17 @@
                 var scrollYAmount = event.deltaY * -1 * event.deltaFactor;
 
                 scrollTop = containerCtrl.viewport[0].scrollTop;
+
                 // Get the scroll percentage
                 scrollEvent.verticalScrollLength = rowContainer.getVerticalScrollLength();
                 var scrollYPercentage = (scrollTop + scrollYAmount) / scrollEvent.verticalScrollLength;
 
+                // If we should be scrolled 100%, make sure the scrollTop matches the maximum scroll length
+                //   Viewports that have "overflow: hidden" don't let the mousewheel scroll all the way to the bottom without this check
+                if (scrollYPercentage >= 1 && scrollTop < scrollEvent.verticalScrollLength) {
+                  containerCtrl.viewport[0].scrollTop = scrollEvent.verticalScrollLength;
+                }
+
                 // Keep scrollPercentage within the range 0-1.
                 if (scrollYPercentage < 0) { scrollYPercentage = 0; }
                 else if (scrollYPercentage > 1) { scrollYPercentage = 1; }

src/js/core/directives/ui-grid-viewport.js

@@ -28,7 +28,7 @@
           $scope.rowContainer = containerCtrl.rowContainer;
           $scope.colContainer = containerCtrl.colContainer;
 
-          // Register this viewport with its container 
+          // Register this viewport with its container
           containerCtrl.viewport = $elm;
 
 
@@ -138,4 +138,4 @@
     }
   ]);
 
-})();
+})();

src/js/core/factories/GridRenderContainer.js

@@ -300,7 +300,7 @@ angular.module('ui.grid')
   };
 
   GridRenderContainer.prototype.getVerticalScrollLength = function getVerticalScrollLength() {
-    return this.getCanvasHeight() - this.getViewportHeight();
+    return this.getCanvasHeight() - this.getViewportHeight() + this.grid.scrollbarHeight;
   };
 
   GridRenderContainer.prototype.getCanvasWidth = function getCanvasWidth() {
@@ -354,6 +354,8 @@ angular.module('ui.grid')
 
       vertScrollPercentage = newScrollTop / vertScrollLength;
 
+      // console.log('vert', vertScrollPercentage, newScrollTop, vertScrollLength);
+
       if (vertScrollPercentage > 1) { vertScrollPercentage = 1; }
       if (vertScrollPercentage < 0) { vertScrollPercentage = 0; }
 
@@ -429,13 +431,17 @@ angular.module('ui.grid')
 
     var maxRowIndex = rowCache.length - minRows;
 
+    // console.log('scroll%1', scrollPercentage);
+
     // Calculate the scroll percentage according to the scrollTop location, if no percentage was provided
     if ((typeof(scrollPercentage) === 'undefined' || scrollPercentage === null) && scrollTop) {
       scrollPercentage = scrollTop / self.getVerticalScrollLength();
     }
 
     var rowIndex = Math.ceil(Math.min(maxRowIndex, maxRowIndex * scrollPercentage));
 
+    // console.log('maxRowIndex / scroll%', maxRowIndex, scrollPercentage, rowIndex);
+
     // Define a max row index that we can't scroll past
     if (rowIndex > maxRowIndex) {
       rowIndex = maxRowIndex;
@@ -738,7 +744,7 @@ angular.module('ui.grid')
   GridRenderContainer.prototype.getViewportStyle = function () {
     var self = this;
     var styles = {};
-    
+
     self.hasHScrollbar = false;
     self.hasVScrollbar = false;