A jQuery plugin that enhances the scrolling experience, by providing a snapping behaviour.
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).
Scroll on the colored rectangles (horizontally and vertically), and notice how it snaps perfectly to each of the colored rectangles.
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.
Scrollsnap is compatible with any recent and decent browser:
iOS safari 5+
internet explorer 9+
There are a few alternatives around, have a look at them before choosing a snaping solution.
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.
The following parameters can be passed to the scrollsnap() method to influence its behaviour: