fix(scroll): scroll issues in UIWebView

fixes #11081 fixes #10976 fixes #10966 fixes #10936 fixes #11051 fixes #10889
ionic-team · Apr 6, 2017 · db37072 · db37072
1 parent 9316f73
commit db37072
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 24 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;
       }
     };