closes #405 - Avoid bouncing on iOS

CHANGELOG.md

@@ -15,6 +15,10 @@
 - [x] [#430 - Modals in page components are buggy](https://github.com/scriptPilot/app-framework/issues/430)
 - [x] [#519 - Kitchen sink update removes all routes](https://github.com/scriptPilot/app-framework/issues/519)
 
+### Improvements
+
+- [x] [#405 - Avoid bouncing on iOS](https://github.com/scriptPilot/app-framework/issues/405)
+
 ## Version 1.4.34
 
 Released on 2017-05-10

lib/app.js

@@ -821,6 +821,64 @@ mixins.manageStatusbarBackgroundColor = {
     }
   }
 }
+mixins.preventOverscroll = {
+  created: function () {
+    // No native application (Overscroll disallowed by Cordova for native Apps)
+    if (!window.cordova) {
+      // Set overflow attribute to app container
+      window.Dom7('#app').css('-webkit-overflow-scrolling', 'touch')
+      // Definen start value
+      var startY = 0
+      // Remember touch start position
+      window.Dom7(document).on('touchstart', evt => {
+        startY = evt.touches ? evt.touches[0].screenY : evt.screenY
+      })
+      // Handle touch move
+      window.Dom7(document).on('touchmove', evt => {
+        // Get the element that was scrolled upon
+        var el = evt.target
+        // Check all parent elements for scrollability
+        while (el !== document.body) {
+          // Get some style properties
+          var style = window.getComputedStyle(el)
+          if (!style) {
+          // If we've encountered an element we can't compute the style for, get out
+            break
+          }
+          // Ignore range input element
+          if (el.nodeName === 'INPUT' && el.getAttribute('type') === 'range') {
+            return
+          }
+          // Determine scrolling property
+          var scrolling = style.getPropertyValue('-webkit-overflow-scrolling')
+          var overflowY = style.getPropertyValue('overflow-y')
+          var height = parseInt(style.getPropertyValue('height'), 10)
+          // Determine if the element should scroll
+          var isScrollable = scrolling === 'touch' && (overflowY === 'auto' || overflowY === 'scroll')
+          var canScroll = el.scrollHeight > el.offsetHeight
+          if (isScrollable && canScroll) {
+            // Get the current Y position of the touch
+            var curY = evt.touches ? evt.touches[0].screenY : evt.screenY
+            // Determine if the user is trying to scroll past the top or bottom
+            // In this case, the window will bounce, so we have to prevent scrolling completely
+            var isAtTop = (startY <= curY && el.scrollTop === 0)
+            var isAtBottom = (startY >= curY && el.scrollHeight - el.scrollTop === height)
+            // Stop a bounce bug when at the bottom or top of the scrollable element
+            if (isAtTop || isAtBottom) {
+              evt.preventDefault()
+            }
+            // No need to continue up the DOM, we've done our job
+            return
+          }
+          // Test the next parent
+          el = el.parentNode
+        }
+        // Stop the bouncing -- no parents are scrollable
+        evt.preventDefault()
+      })
+    }
+  }
+}
 mixins.manageState = {
   data: {
     stateReady: false

scripts/cordova.js

@@ -175,6 +175,13 @@ let updateCordovaConfig = function (callback) {
       'src': 'index.html'
     }
   }
+  // Disallow overscroll
+  config.preference = {
+    '$': {
+      'name': 'DisallowOverscroll',
+      'value': true
+    }
+  }
   // Add Android platform
   if (env.arg.android === true || env.arg.studio) {
     config.platform = {