From bfd2f03177e52c945fd9b7a0713e4715ef9872e8 Mon Sep 17 00:00:00 2001
From: Mike Whiting <mail@mikejw.co.uk>
Date: Thu, 16 Nov 2017 11:01:04 +0000
Subject: [PATCH] simple horiztonal changes

---
 src/lib/Scrollable.js | 16 +++++++++++++---
 src/lib/index.js      |  9 +++++++--
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/lib/Scrollable.js b/src/lib/Scrollable.js
index 66ba9d3..59144e7 100644
--- a/src/lib/Scrollable.js
+++ b/src/lib/Scrollable.js
@@ -3,8 +3,13 @@ import { isEqual, debounce } from './helpers'
 
 export default class Scrollable extends React.Component {
   componentWillReceiveProps = n => {
+
     if (n.scrollTop !== this.props.scrollTop) {
-      this.e.scrollTop = n.scrollTop
+      if (this.props.horizontal) {
+        this.e.scrollLeft = n.scrollTop
+      } else {
+        this.e.scrollTop = n.scrollTop
+      }
     }
     if (n.disable !== this.props.disable) {
       if (n.disable) this.e.style.pointerEvents = 'none'
@@ -22,10 +27,15 @@ export default class Scrollable extends React.Component {
     this.propagateScroll(e)
   }
   propagateScroll = debounce(() => {
-    this.props.onScroll(this.e.scrollTop)
+
+    if (this.props.horizontal) {
+      this.props.onScroll(this.e.scrollLeft);
+    } else {
+      this.props.onScroll(this.e.scrollTop);
+    }
   })
   render() {
-    const { children, height, className } = this.props
+    const { children, height, className, horizontal } = this.props
     return (
       <div
         style={{
diff --git a/src/lib/index.js b/src/lib/index.js
index c874b9e..f4d0e00 100644
--- a/src/lib/index.js
+++ b/src/lib/index.js
@@ -17,7 +17,11 @@ export default class MotionScroll extends React.Component {
     if (this.state.scroll !== to) {
       if (typeof to === 'number') this.fire(to)
       if (typeof to === 'string') {
-        this.fire(document.getElementById(to).offsetTop)
+        if (this.props.horizontal) {
+          this.fire(document.getElementById(to).offsetLeft)
+        } else {
+          this.fire(document.getElementById(to).offsetTop)
+        }
       }
     }
   }
@@ -28,7 +32,7 @@ export default class MotionScroll extends React.Component {
 
   render() {
     const { scrollTo, props, state } = this
-    const { children, height, className, onScroll, config } = props
+    const { children, height, className, onScroll, horizontal, config } = props
     const { scroll, fire } = state
     return (
       <Motion
@@ -45,6 +49,7 @@ export default class MotionScroll extends React.Component {
           height={height}
           disable={this.state.fire}
           scrollTop={m.x}
+          horizontal={horizontal}
           onScroll={this.set('scroll')}
           children={React.cloneElement(children, { scrollTo })}
         />}