From c510100ca19edee08fd8f23b6087ae1273ab6cb0 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Fri, 9 Dec 2016 21:06:22 -0600 Subject: [PATCH] fix(scroll): fix content dimensions for js scrolling --- src/components/content/content.ts | 2 +- .../virtual-scroll/virtual-scroll.ts | 60 ++++++++++--------- src/util/scroll-view.ts | 10 +--- 3 files changed, 35 insertions(+), 37 deletions(-) diff --git a/src/components/content/content.ts b/src/components/content/content.ts index e32270c01f4..8fb6a383cde 100644 --- a/src/components/content/content.ts +++ b/src/components/content/content.ts @@ -450,7 +450,7 @@ export class Content extends Ion implements OnDestroy, OnInit { * @private */ enableJsScroll() { - this._scroll.enableJsScroll(this.contentTop, this.contentBottom); + this._scroll.enableJsScroll(this._cTop, this._cBottom); } /** diff --git a/src/components/virtual-scroll/virtual-scroll.ts b/src/components/virtual-scroll/virtual-scroll.ts index 0f703a66dab..679b357ea15 100644 --- a/src/components/virtual-scroll/virtual-scroll.ts +++ b/src/components/virtual-scroll/virtual-scroll.ts @@ -199,7 +199,7 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy { _data: VirtualData = { scrollTop: 0, }; - _queue: ScrollQueue = null; + _queue: number; @ContentChild(VirtualItem) _itmTmp: VirtualItem; @ContentChild(VirtualHeader) _hdrTmp: VirtualHeader; @@ -506,23 +506,25 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy { // set the scroll top from the scroll event data.scrollTop = ev.scrollTop; - if (this._queue === ScrollQueue.RequiresDomWrite) { + if (this._queue === SCROLL_QUEUE_DOM_WRITE) { // there are DOM writes we need to take care of in this frame this._dom.write(() => { + const recordsLength = this._records.length; + // ******** DOM WRITE **************** - writeToNodes(nodes, cells, this._records.length); + writeToNodes(nodes, cells, recordsLength); // ******** DOM WRITE **************** this._setHeight( - estimateHeight(this._records.length, cells[cells.length - 1], this._vHeight, 0.25) + estimateHeight(recordsLength, cells[cells.length - 1], this._vHeight, 0.25) ); // we're done here, good work - this._queue = ScrollQueue.NoChanges; + this._queue = SCROLL_QUEUE_NO_CHANGES; }); - } else if (this._queue === ScrollQueue.RequiresChangeDetection) { + } else if (this._queue === SCROLL_QUEUE_CHANGE_DETECTION) { // we need to do some change detection in this frame this._dom.write(() => { @@ -536,7 +538,7 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy { } // on the next frame we need write to the dom nodes manually - this._queue = ScrollQueue.RequiresDomWrite; + this._queue = SCROLL_QUEUE_DOM_WRITE; }); } else { @@ -571,7 +573,7 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy { if (hasChanges) { // queue making updates in the next frame - this._queue = ScrollQueue.RequiresChangeDetection; + this._queue = SCROLL_QUEUE_CHANGE_DETECTION; // update the bound context for each node updateNodeContext(nodes, cells, data); @@ -598,6 +600,8 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy { // ******** DOM READS ABOVE / DOM WRITES BELOW **************** this._dom.write(() => { + const recordsLength = this._records.length; + // update the bound context for each node updateNodeContext(nodes, cells, data); @@ -607,30 +611,20 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy { } // ******** DOM WRITE **************** - writeToNodes(nodes, cells, this._records.length); + writeToNodes(nodes, cells, recordsLength); // ******** DOM WRITE **************** this._setHeight( - estimateHeight(this._records.length, cells[cells.length - 1], this._vHeight, 0.05) + estimateHeight(recordsLength, cells[cells.length - 1], this._vHeight, 0.05) ); - this._queue = ScrollQueue.NoChanges; + this._queue = SCROLL_QUEUE_NO_CHANGES; }); } /** - * DOM WRITE + * NO DOM */ - private _setHeight(newVirtualHeight: number) { - if (newVirtualHeight !== this._vHeight) { - // ******** DOM WRITE **************** - this._renderer.setElementStyle(this._elementRef.nativeElement, 'height', newVirtualHeight > 0 ? newVirtualHeight + 'px' : ''); - - this._vHeight = newVirtualHeight; - console.debug('VirtualScroll, height', newVirtualHeight); - } - } - private _listeners() { if (!this._scrollSub) { if (this._config.getBoolean('virtualScrollEventAssist')) { @@ -651,6 +645,19 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy { } } + /** + * DOM WRITE + */ + private _setHeight(newVirtualHeight: number) { + if (newVirtualHeight !== this._vHeight) { + // ******** DOM WRITE **************** + this._renderer.setElementStyle(this._elementRef.nativeElement, 'height', newVirtualHeight > 0 ? newVirtualHeight + 'px' : ''); + + this._vHeight = newVirtualHeight; + console.debug('VirtualScroll, height', newVirtualHeight); + } + } + /** * @private */ @@ -676,9 +683,6 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy { } const SCROLL_DIFFERENCE_MINIMUM = 40; - -export const enum ScrollQueue { - NoChanges, - RequiresChangeDetection, - RequiresDomWrite -} +const SCROLL_QUEUE_NO_CHANGES = 1; +const SCROLL_QUEUE_CHANGE_DETECTION = 2; +const SCROLL_QUEUE_DOM_WRITE = 3; diff --git a/src/util/scroll-view.ts b/src/util/scroll-view.ts index 0dc0fae3d2f..57ec5ec9768 100644 --- a/src/util/scroll-view.ts +++ b/src/util/scroll-view.ts @@ -186,17 +186,11 @@ export class ScrollView { console.debug(`ScrollView, enableJsScroll`); + const ev = self.ev; const positions: number[] = []; let rafCancel: Function; let max: number; - const ev = self.ev; - ev.scrollLeft = 0; - ev.startX = 0; - ev.deltaX = 0; - ev.velocityX = 0; - ev.directionX = null; - function setMax() { if (!max) { // ******** DOM READ **************** @@ -330,7 +324,7 @@ export class ScrollView { } else { self.isScrolling = false; - ev.velocityY = ev.velocityX = 0; + ev.velocityY = 0; self.scrollEnd.next(ev); }