diff --git a/src/components/content/content.ts b/src/components/content/content.ts index 3457b63ee89..0100eca5308 100644 --- a/src/components/content/content.ts +++ b/src/components/content/content.ts @@ -349,7 +349,7 @@ export class Content extends Ion implements OnDestroy, AfterViewInit { ) { super(config, elementRef, renderer, 'content'); - let enableScrollListener = this.enableScrollListener.bind(this); + const enableScrollListener = () => this._scroll.enableEvents(); this.ionScroll.onSubscribe = enableScrollListener; this.ionScrollStart.onSubscribe = enableScrollListener; this.ionScrollEnd.onSubscribe = enableScrollListener; @@ -359,12 +359,7 @@ export class Content extends Ion implements OnDestroy, AfterViewInit { this._imgRndBfr = config.getNumber('imgRenderBuffer', 400); this._imgVelMax = config.getNumber('imgVelocityMax', 3); - // use JS scrolling for iOS UIWebView - // goal is to completely remove this when iOS - // fully supports scroll events - // listen to JS scroll events - const jsScroll = config.getBoolean('virtualScrollEventAssist'); - this._scroll = new ScrollView(_app, _plt, _dom, jsScroll); + this._scroll = new ScrollView(_app, _plt, _dom); while (navCtrl) { if (isTabs(<any>navCtrl)) { @@ -431,8 +426,8 @@ export class Content extends Ion implements OnDestroy, AfterViewInit { /** * @hidden */ - enableScrollListener() { - this._scroll.eventsEnabled = true; + enableJsScroll() { + 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 03bb53dba1e..136b7d13eb3 100644 --- a/src/components/virtual-scroll/virtual-scroll.ts +++ b/src/components/virtual-scroll/virtual-scroll.ts @@ -706,6 +706,14 @@ export class VirtualScroll implements DoCheck, AfterContentInit, OnDestroy { private _listeners() { assert(!this._scrollSub, '_listeners was already called'); if (!this._scrollSub) { + if (this._config.getBoolean('virtualScrollEventAssist')) { + // use JS scrolling for iOS UIWebView + // goal is to completely remove this when iOS + // fully supports scroll events + // listen to JS scroll events + this._content.enableJsScroll(); + } + this._resizeSub = this._plt.resize.subscribe(this.resize.bind(this)); this._scrollSub = this._content.ionScroll.subscribe(this.scrollUpdate.bind(this)); this._scrollEndSub = this._content.ionScrollEnd.subscribe(this.scrollEnd.bind(this)); diff --git a/src/util/events.ts b/src/util/events.ts index e6560f1aea6..fa3aac97faf 100644 --- a/src/util/events.ts +++ b/src/util/events.ts @@ -137,7 +137,7 @@ export function setupEvents(plt: Platform, dom: DomController): Events { let contentEle = <any>el.closest('.scroll-content'); if (contentEle) { var style = contentEle.style; - var scroll = new ScrollView(null, plt, dom, false); + var scroll = new ScrollView(null, plt, dom); scroll._el = contentEle; // We need to stop scrolling if it's happening and scroll up diff --git a/src/util/scroll-view.ts b/src/util/scroll-view.ts index 821f400a3b2..414a604abe4 100644 --- a/src/util/scroll-view.ts +++ b/src/util/scroll-view.ts @@ -14,11 +14,10 @@ export class ScrollView { onScroll: (ev: ScrollEvent) => void; onScrollEnd: (ev: ScrollEvent) => void; initialized: boolean = false; - eventsEnabled: boolean = false; - contentTop: number; - contentBottom: number; - _el: HTMLElement; + + + private _eventsEnabled = false; private _js: boolean; private _t: number = 0; private _l: number = 0; @@ -28,10 +27,8 @@ export class ScrollView { constructor( private _app: App, private _plt: Platform, - private _dom: DomController, - virtualScrollEventAssist: boolean + private _dom: DomController ) { - this._js = virtualScrollEventAssist; this.ev = { timeStamp: 0, scrollTop: 0, @@ -57,19 +54,20 @@ export class ScrollView { init(ele: HTMLElement, contentTop: number, contentBottom: number) { assert(ele, 'scroll-view, element can not be null'); this._el = ele; - this.contentTop = contentTop; - this.contentBottom = contentBottom; - if (!this.initialized) { this.initialized = true; if (this._js) { - this.enableJsScroll(); + this.enableJsScroll(contentTop, contentBottom); } else { this.enableNativeScrolling(); } } } + enableEvents() { + this._eventsEnabled = true; + } + private enableNativeScrolling() { assert(this.onScrollStart, 'onScrollStart is not defined'); assert(this.onScroll, 'onScroll is not defined'); @@ -91,7 +89,7 @@ export class ScrollView { self._app.setScrolling(); // if events are disabled, we do nothing - if (!self.eventsEnabled) { + if (!self._eventsEnabled) { return; } @@ -200,7 +198,7 @@ export class ScrollView { * inertia then this can be burned to the ground. iOS's more modern * WKWebView does not have this issue, only UIWebView does. */ - enableJsScroll() { + enableJsScroll(contentTop: number, contentBottom: number) { const self = this; self._js = true; const ele = self._el; @@ -219,7 +217,7 @@ export class ScrollView { function setMax() { if (!max) { // ******** DOM READ **************** - max = ele.scrollHeight - ele.parentElement.offsetHeight + self.contentTop + self.contentBottom; + max = ele.scrollHeight - ele.parentElement.offsetHeight + contentTop + contentBottom; } };