Skip to content

Commit

Permalink
fix(Grid): Force scroll to 100% when necessary
Browse files Browse the repository at this point in the history
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
  • Loading branch information
c0bra committed Jul 14, 2015
1 parent 6a69120 commit 3bcbe72
Show file tree
Hide file tree
Showing 4 changed files with 22 additions and 7 deletions.
8 changes: 5 additions & 3 deletions misc/demo/pinning.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down Expand Up @@ -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 },
Expand All @@ -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>
Expand Down
7 changes: 7 additions & 0 deletions src/js/core/directives/ui-grid-render-container.js
Original file line number Diff line number Diff line change
Expand Up @@ -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; }
Expand Down
4 changes: 2 additions & 2 deletions src/js/core/directives/ui-grid-viewport.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;


Expand Down Expand Up @@ -138,4 +138,4 @@
}
]);

})();
})();
10 changes: 8 additions & 2 deletions src/js/core/factories/GridRenderContainer.js
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down Expand Up @@ -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; }

Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -738,7 +744,7 @@ angular.module('ui.grid')
GridRenderContainer.prototype.getViewportStyle = function () {
var self = this;
var styles = {};

self.hasHScrollbar = false;
self.hasVScrollbar = false;

Expand Down

2 comments on commit 3bcbe72

@vitthalmahale
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not working !!

I have disable scrolling and make viewport as 100%

I also updated new library, but still wheel scrolling not working.

@vitthalmahale
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

.ui-grid-viewport {
height: 100% !important;
}

Wheel scrolling not working

Please sign in to comment.