feat(scroll): disable body scroll on iOS safari

ionic-team · Dec 15, 2015 · 5875ebc · mlynch · Dec 15, 2015 · 5875ebc
1 parent ebe134b
commit 5875ebc
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 5 deletions.
diff --git a/js/angular/directive/content.js b/js/angular/directive/content.js
@@ -132,7 +132,8 @@ function($timeout, $controller, $ionicBind, $ionicConfig) {
               delegateHandle: attr.delegateHandle,
               startX: $scope.$eval($scope.startX) || 0,
               startY: $scope.$eval($scope.startY) || 0,
-              nativeScrolling: true
+              nativeScrolling: true,
+              disableBodyBounce: $ionicConfig.scrolling.disableBodyBounce()
             };
 
           } else {

diff --git a/js/angular/service/ionicConfig.js b/js/angular/service/ionicConfig.js
@@ -260,7 +260,8 @@ IonicModule
       toggle: PLATFORM
     },
     scrolling: {
-      jsScrolling: PLATFORM
+      jsScrolling: PLATFORM,
+      disableBodyBounce: PLATFORM
     },
     spinner: {
       icon: PLATFORM
@@ -309,7 +310,8 @@ IonicModule
     },
 
     scrolling: {
-      jsScrolling: false
+      jsScrolling: false,
+      disableBodyBounce: false
     },
 
     spinner: {
@@ -324,14 +326,18 @@ IonicModule
     templates: {
       maxPrefetch: 30
     }
-
   });
 
 
 
   // iOS (it is the default already)
   // -------------------------
-  setPlatformConfig('ios', {});
+  setPlatformConfig('ios', {
+    scrolling: {
+      jsScrolling: false,
+      disableBodyBounce: true
+    }
+  });
 
 
 

diff --git a/js/views/scrollViewNative.js b/js/views/scrollViewNative.js
@@ -441,6 +441,26 @@
         self.resize();
       };
 
+      var startY = 0;
+      var curY = 0;
+      var height = 0;
+      self.handleWindowTouchStart = function(e) {
+        startY = e.touches ? e.touches[0].screenY : e.screenY;
+        height = self.el.offsetHeight;
+      };
+
+      self.handleWindowTouchMove = function(e) {
+        curY = e.touches ? e.touches[0].screenY : e.screenY;
+
+				var atTop = (startY <= curY && self.el.scrollTop === 0);
+				var atBottom = (startY >= curY && self.el.scrollHeight - self.el.scrollTop === height);
+
+        if(atTop || atBottom) {
+          // Disable body bounce
+          e.preventDefault();
+        }
+      };
+
       container.addEventListener('scroll', self.onScroll);
 
       //Broadcasted when keyboard is shown on some platforms.
@@ -453,6 +473,12 @@
       // Since we can only resize scroll views that are currently visible, just resize
       // the current scroll view when the keyboard is closed.
       document.addEventListener('resetScrollView', self.resetScrollView);
+
+      if(self.options.disableBodyBounce && !ionic.Platform.isWebView()) {
+        window.addEventListener('touchstart', self.handleWindowTouchStart);
+        window.addEventListener('touchmove', self.handleWindowTouchMove);
+      }
+
     },
 
     __cleanup: function() {
@@ -465,6 +491,11 @@
       container.removeEventListener('scrollChildIntoView', self.scrollChildIntoView);
       container.removeEventListener('resetScrollView', self.resetScrollView);
 
+      if(self.options.disableBodyBounce && !ionic.Platform.isWebView()) {
+        window.removeEventListener('touchstart', self.handleWindowTouchStart);
+        window.removeEventListener('touchmove', self.handleWindowTouchMove);
+      }
+
       ionic.tap.removeClonedInputs(container, self);
 
       delete self.__container;