Scrollsnap

A jQuery plugin that enhances the scrolling experience, by providing a snapping behaviour.

Scroll snapping

Scrollsnap allows to define 'anchor points' onto which the window snaps when you scroll through a web page or parts of it.

Scrollsnap document

Scroll this page and notice how the window will snap to each snapping element (visible thru their snap line decoration).

Scrollsnap scrollable elements

Scroll on the colored rectangles (horizontally and vertically), and notice how it snaps perfectly to each of the colored rectangles.

Scrollsnap scrollable frames

Same here but with iframes. Scroll on the colored rectangles (horizontally and vertically), and notice how it snaps perfectly to each of the colored rectangles.

Compatibility

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

Alternatives

There are a few alternatives around, have a look at them before choosing a snaping solution.

Use it

Installation

It of course requires jQuery, but also two jquery plugins: jquery.scrollstop that implements a special scrollstop 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 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: '*'.
direction:
the direction ('x', 'y') of scrolling; default: 'y'.
proximity:
the maximal distance from the viewport top from which the snapping occurs; default: 12.
offset:
the offset the snapping move must take; default: 0.
latency:
the time interval in milliseconds to check wether the scroll has stopped; default: 250.
duration:
the number of milliseconds during which the snapping animation takes place; default: 200.
easing:
easing function; default: 'swing' (the default jquery easing).
onSnapEvent:
the name of the event to trigger on the snapped DOM element when the snapping occurs; default: scrollsnap.
onSnap:
the callback function to call when a DOM element is snapped; the element is passed as argument.
onSnapWait:
the number of millinseconds to wait before the onSnapEvent is fired (to avoid redundant snaps); defaullt: 50.

Contribute

Fork me on github.

Fork me on GitHub