[Scroll] Improve native scroll handling

Fix chrome warning where trying to prevent default a scroll event than can't be. That's making the axis="y" property working much better Also address #158.
oliviertassinari · Sep 27, 2016 · e187f31 · e187f31
1 parent 04c0b29
commit e187f31
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 20 deletions.
diff --git a/docs/src/demo/DemoAxis.js b/docs/src/demo/DemoAxis.js
@@ -24,7 +24,7 @@ const styles = {
 };
 
 const DemoAxis = () => (
-  <SwipeableViews containerStyle={styles.slideContainer} axis="y">
+  <SwipeableViews containerStyle={styles.slideContainer} axis="y" resistance={true}>
     <div style={Object.assign({}, styles.slide, styles.slide1)}>
       slide n°1
     </div>

diff --git a/docs/src/demo/DemoNested.js b/docs/src/demo/DemoNested.js
@@ -9,6 +9,9 @@ const styles = {
     minHeight: 100,
     color: '#fff',
   },
+  slideContainerY: {
+    height: 100,
+  },
   slide1: {
     backgroundColor: '#FEA900',
   },
@@ -35,10 +38,10 @@ const DemoNested = () => (
       <div style={styles.divider} />
       <SwipeableViews resistance={true}>
         <div style={Object.assign({}, styles.slide, styles.slide2)}>
-          nested slide n°1
+          nested slide n°1.1
         </div>
         <div style={Object.assign({}, styles.slide, styles.slide3)}>
-          nested slide n°2
+          nested slide n°1.2
         </div>
       </SwipeableViews>
     </div>
@@ -52,10 +55,22 @@ const DemoNested = () => (
       <div style={styles.divider} />
       <SwipeableViews>
         <div style={Object.assign({}, styles.slide, styles.slide1)}>
-          nested slide n°3
+          nested slide n°2.1
         </div>
         <div style={Object.assign({}, styles.slide, styles.slide3)}>
-          nested slide n°4
+          nested slide n°2.2
+        </div>
+      </SwipeableViews>
+    </div>
+    <div style={Object.assign({}, styles.slide, styles.slide3)}>
+      slide n°3
+      <div style={styles.divider} />
+      <SwipeableViews axis="y" containerStyle={styles.slideContainerY}>
+        <div style={Object.assign({}, styles.slide, styles.slide1)}>
+          nested slide n°3.1
+        </div>
+        <div style={Object.assign({}, styles.slide, styles.slide2)}>
+          nested slide n°3.2
         </div>
       </SwipeableViews>
     </div>

diff --git a/src/SwipeableViews.js b/src/SwipeableViews.js
@@ -312,23 +312,23 @@ class SwipeableViews extends Component {
 
     const touch = applyRotationMatrix(event.touches[0], axis);
 
+    // Prevent native scrolling until we know the user intention.
+    if (this.isSwiping !== false) {
+      event.preventDefault();
+    }
+
     // We don't know yet.
     if (this.isSwiping === undefined) {
-      // Bypass the swipe detection when the direction is along the y axis.
-      if (axis === 'y' || axis === 'y-reverse') {
-        this.isSwiping = true;
-      } else {
-        const dx = Math.abs(this.startX - touch.pageX);
-        const dy = Math.abs(this.startY - touch.pageY);
+      const dx = Math.abs(this.startX - touch.pageX);
+      const dy = Math.abs(this.startY - touch.pageY);
 
-        const isSwiping = dx > dy && dx > UNCERTAINTY_THRESHOLD;
+      const isSwiping = dx > dy && dx > UNCERTAINTY_THRESHOLD;
 
-        if (isSwiping === true || dx > UNCERTAINTY_THRESHOLD || dy > UNCERTAINTY_THRESHOLD) {
-          this.isSwiping = isSwiping;
-          this.startX = touch.pageX; // Shift the starting point.
+      if (isSwiping === true || dx > UNCERTAINTY_THRESHOLD || dy > UNCERTAINTY_THRESHOLD) {
+        this.isSwiping = isSwiping;
+        this.startX = touch.pageX; // Shift the starting point.
 
-          return; // Let's wait the next touch event to move something.
-        }
+        return; // Let's wait the next touch event to move something.
       }
     }
 
@@ -379,9 +379,6 @@ class SwipeableViews extends Component {
       nodeHowClaimedTheScroll = this.node;
     }
 
-    // Prevent native scrolling.
-    event.preventDefault();
-
     this.setState({
       isDragging: true,
       indexCurrent: index,