alihan/openmct
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Table] prevent forced reflow on scroll (#2117)

Browse Source 
Prevent forcing a reflow during scroll events, improving scroll
performance.
This commit is contained in:
Pete Richards
2018-07-20 16:49:52 -07:00
committed by Pegah Sarram
parent cde3994979
commit 15a75ac134
1 changed files with 17 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
platform/features/table/src/controllers/MCTTableController.js
View File

@@ -262,19 +262,26 @@ define(
* @private * @private
*/ */
MCTTableController.prototype.onScroll = function (event) { MCTTableController.prototype.onScroll = function (event) {
this.scrollWindow = {
top: this.scrollable[0].scrollTop,
bottom: this.scrollable[0].scrollTop + this.scrollable[0].offsetHeight,
offsetHeight: this.scrollable[0].offsetHeight,
height: this.scrollable[0].scrollHeight
};
this.$window.requestAnimationFrame(function () { this.$window.requestAnimationFrame(function () {
this.setVisibleRows(); this.setVisibleRows();
this.digest(); this.digest();
// If user scrolls away from bottom, disable auto-scroll. // If user scrolls away from bottom, disable auto-scroll.
// Auto-scroll will be re-enabled if user scrolls to bottom again. // Auto-scroll will be re-enabled if user scrolls to bottom again.
if (this.scrollable[0].scrollTop < if (this.scrollWindow.top <
(this.scrollable[0].scrollHeight - this.scrollable[0].offsetHeight) - 20) { (this.scrollWindow.height - this.scrollWindow.offsetHeight) - 20) {
this.$scope.autoScroll = false; this.$scope.autoScroll = false;
} else { } else {
this.$scope.autoScroll = true; this.$scope.autoScroll = true;
} }
this.scrolling = false; this.scrolling = false;
delete this.scrollWindow;
}.bind(this)); }.bind(this));
}; };
@@ -283,15 +290,14 @@ define(
* @private * @private
*/ */
MCTTableController.prototype.firstVisible = function () { MCTTableController.prototype.firstVisible = function () {
var target = this.scrollable[0], var topScroll = this.scrollWindow ?
topScroll = target.scrollTop, this.scrollWindow.top :
firstVisible; this.scrollable[0].scrollTop;
firstVisible = Math.floor( return Math.floor(
(topScroll) / this.$scope.rowHeight (topScroll) / this.$scope.rowHeight
); );
return firstVisible;
}; };
/** /**
@@ -299,16 +305,14 @@ define(
* @private * @private
*/ */
MCTTableController.prototype.lastVisible = function () { MCTTableController.prototype.lastVisible = function () {
var target = this.scrollable[0], var bottomScroll = this.scrollWindow ?
topScroll = target.scrollTop, this.scrollWindow.bottom :
bottomScroll = topScroll + target.offsetHeight, this.scrollable[0].scrollTop + this.scrollable[0].offsetHeight;
lastVisible;
lastVisible = Math.ceil( return Math.ceil(
(bottomScroll) / (bottomScroll) /
this.$scope.rowHeight this.$scope.rowHeight
); );
return lastVisible;
}; };
/** /**