A small jQuery plugin that brings the snappy scrolling behavior that e.g. Apple uses for its iPhone 5s and 5c pages to your website. Works on desktop and mobile.

Demo    * includes cat content


Using Bower (recommended)

Bower is a package manager for the web. Once Bower is installed it is super easy to install jquery-snappish:

$ bower install jquery-snappish

Using Git

If you prefer to get a fresh checkout of the Git repo, check our Github page or clone right away:

$ git clone https://github.com/philippbosch/jquery-snappish.git

Manual Download

Download a ZIP archive of the source code:

v0.2.0 master


jquery-snappish depends on jQuery (surprise!) and the following plugins:

If you are using Bower to install jquery-snappish it will automatically install these dependencies for you. Otherwise make sure you download them on your own.


In order to make use of jquery-snappish follow these steps:

1. Include the stylesheet somewhere in your <head>

<link href="path/to/jquery.snappish.css" rel="stylesheet">

2. Include the javascripts right before the </body>

<script src="path/to/jquery.js"></script>
<script src="path/to/jquery.mousewheel.js"></script>
<script src="path/to/jquery.event.move.js"></script>
<script src="path/to/jquery.event.swipe.js"></script>
<script src="path/to/jquery.snappish.js"></script>

3. Create the basic HTML structure

jquery-snappish has minimal requirements regarding your HTML markup. Essentially it needs a wrapping element (#mywrapper in the example) and inside of that a container element (needs to have a class of .snappish-main) for the individual slides. Before or after the .snappish-container you can include other elements such as a navigation menu or a footer. It might be a good idea to apply position: fixed to these with CSS.
<div id="mywrapper">
    <div class="snappish-main"><!-- we need this class name to determine the scrollable content -->
      <div><!-- the first slide --></div>
      <div><!-- the second slide --></div>
      <div><!-- the third slide --></div>
      <!-- create as many slides as you want -->

4. Initialize jquery-snappish in a <script> tag or an exteral JS file



You may bind to the following events on the wrapper element:

Event parameters

An event handler that you bind to any of the two events will receive an object with some additional event parameters as the second argument (the first is always the jQuery event):


$('#mywrapper').on('scrollbegin.snappish', function(event, data) {
  console.log('from slide', data.fromSlide, data.fromSlideNum);
  console.log('to slide', data.toSlide, data.toSlideNum);

Programmatic access

In case you want to «remote control» the scrolling from your code (e.g. when the user clicks on a navigation item) you can do so by triggering one of the following events on the wrapper element:


$('button.up').on('click', function(e) {
  $('#mywrapper').trigger('scrollup.snappish');     // scroll up one slide

$('button.down').on('click', function(e) {
  $('#mywrapper').trigger('scrolldown.snappish');   // scroll down one slide

$('button.top').on('click', function(e) {
  $('#mywrapper').trigger('scrollto.snappish', 0);  // scroll to the first (=0) slide


jquery-snappish is a project by Philipp Bosch, inspired by the scrolling behavior that Apple uses for their iPhone 5s and 5c websites. The original idea and some code was borrowed from this codepen by Josh Rutherford.



Fork me on GitHub