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 an iframe. Scroll on the colored rectangles (vertically), and notice how it snaps perfectly to each of the colored rectangles.
Scrollsnap is compatible with any recent and decent browser:
chrome 24+
firefox 18+
safari 5+
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 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.
<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>
The following parameters can be passed to the scrollsnap() method to influence its behaviour: