fix(scroll): fix content dimensions for js scrolling

This commit is contained in:
Adam Bradley
2016-12-09 21:06:22 -06:00
parent 0e081583a8
commit c510100ca1
3 changed files with 35 additions and 37 deletions

View File

@ -450,7 +450,7 @@ export class Content extends Ion implements OnDestroy, OnInit {
* @private * @private
*/ */
enableJsScroll() { enableJsScroll() {
this._scroll.enableJsScroll(this.contentTop, this.contentBottom); this._scroll.enableJsScroll(this._cTop, this._cBottom);
} }
/** /**

View File

@ -199,7 +199,7 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy {
_data: VirtualData = { _data: VirtualData = {
scrollTop: 0, scrollTop: 0,
}; };
_queue: ScrollQueue = null; _queue: number;
@ContentChild(VirtualItem) _itmTmp: VirtualItem; @ContentChild(VirtualItem) _itmTmp: VirtualItem;
@ContentChild(VirtualHeader) _hdrTmp: VirtualHeader; @ContentChild(VirtualHeader) _hdrTmp: VirtualHeader;
@ -506,23 +506,25 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy {
// set the scroll top from the scroll event // set the scroll top from the scroll event
data.scrollTop = ev.scrollTop; 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 // there are DOM writes we need to take care of in this frame
this._dom.write(() => { this._dom.write(() => {
const recordsLength = this._records.length;
// ******** DOM WRITE **************** // ******** DOM WRITE ****************
writeToNodes(nodes, cells, this._records.length); writeToNodes(nodes, cells, recordsLength);
// ******** DOM WRITE **************** // ******** DOM WRITE ****************
this._setHeight( 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 // 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 // we need to do some change detection in this frame
this._dom.write(() => { 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 // on the next frame we need write to the dom nodes manually
this._queue = ScrollQueue.RequiresDomWrite; this._queue = SCROLL_QUEUE_DOM_WRITE;
}); });
} else { } else {
@ -571,7 +573,7 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy {
if (hasChanges) { if (hasChanges) {
// queue making updates in the next frame // queue making updates in the next frame
this._queue = ScrollQueue.RequiresChangeDetection; this._queue = SCROLL_QUEUE_CHANGE_DETECTION;
// update the bound context for each node // update the bound context for each node
updateNodeContext(nodes, cells, data); updateNodeContext(nodes, cells, data);
@ -598,6 +600,8 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy {
// ******** DOM READS ABOVE / DOM WRITES BELOW **************** // ******** DOM READS ABOVE / DOM WRITES BELOW ****************
this._dom.write(() => { this._dom.write(() => {
const recordsLength = this._records.length;
// update the bound context for each node // update the bound context for each node
updateNodeContext(nodes, cells, data); updateNodeContext(nodes, cells, data);
@ -607,30 +611,20 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy {
} }
// ******** DOM WRITE **************** // ******** DOM WRITE ****************
writeToNodes(nodes, cells, this._records.length); writeToNodes(nodes, cells, recordsLength);
// ******** DOM WRITE **************** // ******** DOM WRITE ****************
this._setHeight( 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() { private _listeners() {
if (!this._scrollSub) { if (!this._scrollSub) {
if (this._config.getBoolean('virtualScrollEventAssist')) { 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 * @private
*/ */
@ -676,9 +683,6 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy {
} }
const SCROLL_DIFFERENCE_MINIMUM = 40; const SCROLL_DIFFERENCE_MINIMUM = 40;
const SCROLL_QUEUE_NO_CHANGES = 1;
export const enum ScrollQueue { const SCROLL_QUEUE_CHANGE_DETECTION = 2;
NoChanges, const SCROLL_QUEUE_DOM_WRITE = 3;
RequiresChangeDetection,
RequiresDomWrite
}

View File

@ -186,17 +186,11 @@ export class ScrollView {
console.debug(`ScrollView, enableJsScroll`); console.debug(`ScrollView, enableJsScroll`);
const ev = self.ev;
const positions: number[] = []; const positions: number[] = [];
let rafCancel: Function; let rafCancel: Function;
let max: number; let max: number;
const ev = self.ev;
ev.scrollLeft = 0;
ev.startX = 0;
ev.deltaX = 0;
ev.velocityX = 0;
ev.directionX = null;
function setMax() { function setMax() {
if (!max) { if (!max) {
// ******** DOM READ **************** // ******** DOM READ ****************
@ -330,7 +324,7 @@ export class ScrollView {
} else { } else {
self.isScrolling = false; self.isScrolling = false;
ev.velocityY = ev.velocityX = 0; ev.velocityY = 0;
self.scrollEnd.next(ev); self.scrollEnd.next(ev);
} }