Scrollsnap

Scroll snapping

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).

Compatibility

Scrollsnap is compatible with any recent and decent browser:
chrome 24+
firefox 18
safari 5-6
iOS safari 5-6
internet explorer 9

Use it

Installation

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.

Usage
<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>
Configuration

The following parameters can be passed to the scrollsnap() method to influence its behaviour:

snaps:
the CSS selector of snapping elements; default: '*'.
proximity:
the maximal distance from the viewport top from which the snapping occurs; default: 12.
offset:
the vertical offset the snapping move must take; default: 0.
duration:
the number of milliseconds during which the snapping animation takes place; default: 200.
easing:
easing function; default: 'swing' (the default jquery easing).

Contribute

Fork me on github.