Merge pull request #256 from oliviertassinari/axis-scroll

Fix native vertical scrolling within slide.
oliviertassinari · Feb 25, 2017 · 9ed996a · 9ed996a
2 parents e2ec2e7 + 46446ba
commit 9ed996a
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/docs/src/demo/DemoAxis.js b/docs/src/demo/DemoAxis.js
@@ -18,7 +18,12 @@ const styles = {
   slide2: {
     backgroundColor: '#B3DC4A',
   },
+  scroll: {
+    height: 100,
+    overflow: 'scroll',
+  },
   slide3: {
+    height: 200,
     backgroundColor: '#6AC0FF',
   },
 };
@@ -31,8 +36,10 @@ const DemoAxis = () => (
     <div style={Object.assign({}, styles.slide, styles.slide2)}>
       slide n°2
     </div>
-    <div style={Object.assign({}, styles.slide, styles.slide3)}>
-      slide n°3
+    <div style={styles.scroll}>
+      <div style={Object.assign({}, styles.slide, styles.slide3)}>
+        slide n°3
+      </div>
     </div>
   </SwipeableViews>
 );

diff --git a/packages/react-swipeable-views/src/SwipeableViews.js b/packages/react-swipeable-views/src/SwipeableViews.js
@@ -161,7 +161,10 @@ export function getDomTreeShapes(element, rootNode) {
       style.getPropertyValue('overflow-x') === 'hidden'
     ) {
       domTreeShapes = [];
-    } else if (element.clientWidth > 0 && element.scrollWidth > element.clientWidth) {
+    } else if (
+      (element.clientWidth > 0 && element.scrollWidth > element.clientWidth) ||
+      (element.clientHeight > 0 && element.scrollHeight > element.clientHeight)
+    ) {
       // Ignore the nodes that have no width.
       // Keep elements with a scroll
       domTreeShapes.push({