Scrollsnap allows to define 'anchor points' onto which the window snaps when you scroll through a web page or parts of it.
Scroll this page and notice how the window will snap to each snapping element (visible thru their snap line decoration).
Scrollsnap is compatible with any recent and decent browser:
chrome 24+
firefox 18
safari 5-6
iOS safari 5-6
internet explorer 9
It of course requires jQuery, but also two jquery plugins: jquery.event.special.js that implements special scroll events, and jquery.easing.js, that provides extra easing functions. These plugins are here provided along the jquery.scrollsnap.js source file, for ease of use.
Note that the Scrollsnap plugin only implements the vertical snapping logic and provides no styling.
<script src="demo/foundation/javascripts/jquery.js"></script>
<script src="src/jquery.event.special.js"></script>
<script src="src/jquery.easing.min.js"></script>
<script src="src/jquery.scrollsnap.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(document).scrollsnap({
snaps: '.snap',
proximity: 50
});
});
</script>
The following parameters can be passed to the scrollsnap() method to influence its behaviour: