Scrollsnap

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

Use it

Installation

It of course requires jQuery, but also two jquery plugins: jquery.scrollstop that implements a special scrollstop events, and optionally jquery.easing.js, that provides extra easing functions (jquery itself has one easing function). 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.easing.min.js"></script>
<script src="src/jquery.scrollstop.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.