fisshy · newsiberian · Oct 10, 2015 · Oct 10, 2015 · Oct 10, 2015 · Oct 10, 2015
diff --git a/README.md b/README.md
@@ -21,6 +21,11 @@ Checkout examples
 >> Or
 >> [Code](https://github.com/fisshy/react-scroll/blob/master/examples/basic/app.js)
 
+> Scroll-snap
+>> [Live](#)
+>> Or
+>> [Code](https://github.com/fisshy/react-scroll/blob/master/examples/scroll-snap/app.js)
+
 ### Usage
 ```js
 
@@ -86,7 +91,15 @@ var Link = React.createClass({
 
 ```
 
-
+### Scroll-snap emulation
+Mixin added an emulation of [scroll-snap](https://developer.mozilla
+.org/en-US/docs/Web/CSS/scroll-snap-type) to your components. This can 
+be interesting for landing pages. Just include the mixin into parent component.
+```
+...
+  mixins: [ScrollSnapMixin],
+...  
+```
 
 ### Todo
 - [x] Vertical scrolling

diff --git a/examples/basic/index.html b/examples/basic/index.html
@@ -1,9 +1,9 @@
 <!doctype html>
-<header>
+<head>
 	<title>React Scroll Examples</title>
 	<link href="app.css" rel="stylesheet"/>
 	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"
-</header>
+</head>
 <body>
 	<div id="example">
 	</div>

diff --git a/examples/index.html b/examples/index.html
@@ -1 +1,2 @@
-<a href="/basic/index.html"> Basic </a>
+<a href="/basic/index.html"> Basic </a><br/>
+<a href="/scroll-snap/index.html"> ScrollSnap </a>
diff --git a/examples/scroll-snap/app.css b/examples/scroll-snap/app.css
@@ -0,0 +1,26 @@
+/* uncomment this if native scroll-snap is needed */
+/*@supports (scroll-snap-type: mandatory) or (-webkit-scroll-snap-type: mandatory) {
+	#wrapper {
+		height: 100vh;
+	}
+}*/
+
+#wrapper {
+	overflow-y: auto;
+	scroll-behavior: smooth;
+	scroll-snap-type: mandatory;
+	scroll-snap-points-y: repeat(100vh);
+}
+
+.element {
+	height:100vh;
+	font-size: 45px;
+	border-top:1px solid #000;
+	padding-top:55px;
+	padding-left:10px;
+	/*scroll-snap-coordinate: 0 0;*/
+}
+
+.active {
+	color:red !important;
+}
diff --git a/examples/scroll-snap/app.js b/examples/scroll-snap/app.js
@@ -0,0 +1,84 @@
+"use strict";
+
+var React = require('react');
+var ReactDOM = require('react-dom');
+var Scroll = require('react-scroll'); 
+
+var Link = Scroll.Link;
+var Element = Scroll.Element;
+var ScrollSnapMixin = Scroll.ScrollSnapMixin;
+
+var Section = React.createClass({
+  getInitialState() {
+    return {
+      overflow: true
+    }
+  },
+
+  mixins: [ScrollSnapMixin],
+
+  handleClick: function () {
+    if (this.state.overflow) {
+      document.body.style.overflowY = 'hidden';
+      this.setState({ overflow: false });
+    } else {
+      document.body.style.overflowY = 'scroll';
+      this.setState({ overflow: true });
+    }
+  },
+
+  render: function () {
+    var overflow;
+
+    if (this.state.overflow) {
+      overflow = 'With';
+    } else {
+      overflow = 'Without';
+    }
+
+    return (
+      <div id="wrapper">
+        <nav className="navbar navbar-default navbar-fixed-top">
+          <div className="container-fluid">
+            <div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+              <ul className="nav navbar-nav">
+                <li><Link to="test1" spy={true} smooth={true} duration={500} >Test 1</Link></li>
+                <li><Link to="test2" spy={true} smooth={true} duration={500}>Test 2</Link></li>
+                <li><Link to="test3" spy={true} smooth={true} duration={500} >Test 3</Link></li>
+                <li><Link to="test4" spy={true} smooth={true} duration={500}>Test 4</Link></li>
+                <li><Link to="test5" spy={true} smooth={true} duration={500}>Test 5</Link></li>
+                <li><a onClick={ this.handleClick }>{overflow} "overflow: hidden"</a></li>
+              </ul>
+            </div>
+          </div>
+        </nav>
+
+        <Element name="test1" className="element" style={{ backgroundColor: '#ffffff' }}>
+          test 1
+        </Element>
+
+        <Element name="test2" className="element" style={{ backgroundColor: '#008000' }}>
+          test 2
+        </Element>
+
+        <Element name="test3" className="element" style={{ backgroundColor: '#00C0C0' }}>
+          test 3
+        </Element>
+
+        <Element name="test4" className="element" style={{ backgroundColor: '#C0C0FF' }}>
+          test 4
+        </Element>
+
+        <Element name="test5" className="element" style={{ backgroundColor: '#FFC0FF' }}>
+          test 5
+        </Element>
+      </div>
+    );
+  }
+});
+
+
+ReactDOM.render(
+  <Section />,
+  document.getElementById('example')
+);
diff --git a/examples/scroll-snap/index.html b/examples/scroll-snap/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<head>
+	<title>React Scroll Examples</title>
+	<link href="app.css" rel="stylesheet"/>
+	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"
+</head>
+<body>
+	<div id="example">
+	</div>
+</body>
+
+<script src="/__build__/shared.js"></script>
+<script src="/__build__/scroll-snap.js"></script>
diff --git a/modules/index.js b/modules/index.js
@@ -3,4 +3,5 @@ exports.Button = require('./components/Button.js');
 exports.Element = require('./components/Element.js');
 exports.Helpers = require('./mixins/Helpers.js');
 exports.scroller = require('./mixins/scroller.js');
+exports.ScrollSnapMixin = require('./mixins/scroll-snap.js');
 exports.scrollSpy = require('./mixins/scroll-spy.js');
diff --git a/modules/mixins/Helpers.js b/modules/mixins/Helpers.js
@@ -20,7 +20,11 @@ var Helpers = {
     },
 
     scrollTo : function(to) {
+      var duration = this.props.duration;
+
       scroller.scrollTo(to, this.props.smooth, this.props.duration, this.props.offset);
+
+      setTimeout(function() { scroller.flushTarget() }, duration);
     },
 
     onClick: function(event) {
@@ -45,7 +49,6 @@ var Helpers = {
        */
 
       this.scrollTo(this.props.to);
-
     },
 
     componentDidMount: function() {