fix(modal): better scroll behaviour for scrollable areas (iOS)

BowlingX · Mar 6, 2016 · f29b4a1 · f29b4a1
1 parent 6b47305
commit f29b4a1
Show file tree

Hide file tree

Showing 12 changed files with 112 additions and 26 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -97,7 +97,7 @@ <h3>Build-Status</h3>
     ga('send', 'pageview');
 </script>
 <script src="//cdn.polyfill.io/v1/polyfill.min.js" async defer></script>
-<script type="application/javascript" src="{{ site.baseurl }}/build/js/flexcss.min.js"></script>
+<script type="application/javascript" src="{{ site.baseurl }}/build/js/flexcss.js"></script>
 <script type="application/javascript">
     (function (document) {
         document.addEventListener('DOMContentLoaded', function () {

diff --git a/build/js/flexcss.js b/build/js/flexcss.js
diff --git a/build/js/flexcss.min.js b/build/js/flexcss.min.js
diff --git a/build/js/modal.js b/build/js/modal.js
diff --git a/build/js/modal.min.js b/build/js/modal.min.js
diff --git a/build/maps/flexcss.map b/build/maps/flexcss.map
diff --git a/build/maps/flexcss.min.map b/build/maps/flexcss.min.map
diff --git a/build/maps/form.map b/build/maps/form.map
diff --git a/build/maps/form.min.map b/build/maps/form.min.map
diff --git a/build/maps/modal.map b/build/maps/modal.map
diff --git a/build/maps/modal.min.map b/build/maps/modal.min.map
diff --git a/src/main/lib/FixedWindow.js b/src/main/lib/FixedWindow.js
@@ -101,7 +101,10 @@ export default class FixedWindow {
             e.preventDefault();
         };
 
-        let shouldNotMove = false;
+        let shouldNotMoveUp = false;
+        let shouldNotMoveDown = false;
+        let neverScroll = false;
+        let lastClientY = 0;
         this.touchStartListener = (e) => {
             let { element } = this.getCurrentWidget();
             const closestOverflow = Util.closestCallback(e.target,
@@ -111,11 +114,17 @@ export default class FixedWindow {
                 element = closestOverflow;
             }
             if (Util.isPartOfNode(e.target, element)) {
+                neverScroll = element.scrollHeight === element.offsetHeight;
+                lastClientY = e.touches[0].clientY;
+                // never allow scrolling when there is nothing to scroll
+                if (neverScroll) {
+                    return false;
+                }
                 if (element.scrollTop === 0) {
                     element.scrollTop = 1;
-                    shouldNotMove = true;
+                    shouldNotMoveUp = true;
                 } else if (element.scrollHeight === element.scrollTop + element.offsetHeight) {
-                    shouldNotMove = true;
+                    shouldNotMoveDown = true;
                     element.scrollTop -= 1;
                 }
             }
@@ -127,10 +136,29 @@ export default class FixedWindow {
         this.touchMoveListener = (e) => {
             const { element } = this.getCurrentWidget();
             if (Util.isPartOfNode(e.target, element)) {
-                if (!shouldNotMove) {
+                const { clientY } = e.touches[0];
+                const isScrollingDown = (lastClientY - clientY) > 0;
+                lastClientY = clientY;
+
+                if (neverScroll) {
+                    neverScroll = false;
+                    return false;
+                }
+
+                if (!shouldNotMoveDown && isScrollingDown) {
                     e.stopImmediatePropagation();
                 }
-                shouldNotMove = false;
+
+                if (shouldNotMoveDown && !isScrollingDown) {
+                    e.stopImmediatePropagation();
+                }
+
+                if (!shouldNotMoveDown && !shouldNotMoveUp && !isScrollingDown) {
+                    e.stopImmediatePropagation();
+                }
+
+                shouldNotMoveUp = false;
+                shouldNotMoveDown = false;
             }
         };
         global.document.body.addEventListener('touchmove', this.touchMoveListener);