iScroll snaps to version 3.6 (beta)

One of the most important features has been finally added to iScroll: please welcome the snap scroll. The scrolling area is subdivided into pages and you may choose to scroll to any page both programmatically and with user swipes. The code has been further optimized so that the new feature doesn’t impact on file size nor performance.

Initially I thought I would have created a new script just for snap-scroll but I ended up adding this feature to iScroll itself. The code needed for the snap is pretty simple and doesn’t impact the overall performance, so I decided to keep everything together. I also managed to keep the whole script under 12k (minified).

Have a look at the new feature in action or point your simulator to the live demo (http://bit.ly/bYwb03).

How it works

To activate the snap to fixed position call iScoll with snap option set to true.

new iScroll('scroller', { snap:true, momentum:false });

In the above example I also disabled momentum but snap works flawlessly with momentum as well. Without momentum the user can swipe one page at a time. With momentum you have exactly the same behavior of standard iScroll, but the content will always stop at prefixed positions.

To have a perfect snapping experience the scrolling area should be perfectly divisible by the container size. Eg: If the container width is 200px and you have 10 elements, the whole scroller should be 2000px wide. This is not mandatory as iScroll doesn’t break if the last page is smaller than the container.

To add some spice to the recipe, I also added an onScrollEnd function that you can customize to execute your precious code when the animation ends.

myScroll.onScrollEnd = function () {
	console.log(this.pageX);	// Current page on X axis
	console.log(this.pageY);	// Current page on Y axis
	console.log(this.maxPageX);	// Max number of horizontal pages
	console.log(this.maxPageY);	// Max number of vertical pages
};

onScollEnd lets us do some cool stuff such as page indicator dots like in the example you see in the screencast.

iScroll.pageX and .pageY give you the current active page. iScroll.maxPageX and .maxPageY give you the number of pages. Please consider that all values are 0 based, page 1 is actually page 0.

Finally to skip to a page you have the newly introduced scrollToPage(x, y, runtime) function.

x and y can be any number from 0 to maxPageX/Y. To help you out you can also pass “next” and “prev” as value. runtime is optional.

The following code will go to the next horizontal page with default runtime:

myScroll.scrollToPage("next", 0)

This is pretty much all you need to know. Go get the new code and don’t forget we are in beta. Soon some more documentation.

I also wanted to thank Marko (spilledmilkdesigns), Roberto (uki fork) and Stig (Fashion.net) for keeping me posted about their iScroll powered projects.

12 thoughts on “iScroll snaps to version 3.6 (beta)”

  1. This is awesome. Thank you very much and congratulations for this little jewel 🙂

  2. I hate to sound like a broken record, but does anyone have a workaround for the dropdown selects?

    $(“select”).live(“click”,function(){$(this).focus()});
    I tried focusing, but it did not cause the selector to show.

  3. I just saw the workaround from the previous iScroll post.

    Sorry and Thanks!

  4. First of all very thanks for saving us!

    You said that #scroller position is optional for this. But I came to know that the position is required for #scroller.

  5. Hey Matteo – this iSrcoll thing is really pretty amazing. At first I was skeptical about it feeling clunky and slow, but it really is just as nice as native (for me, anyway).

    I had a question about snapping – am I right in thinking that the snap just divides the height of the panel into even-height chunks? Or is there some determination of the child elements within the scrolling panel?

    I’d like to set up a snapping scroll that snapped to the top of all the direct children of the scrolling element. Is that easy? Or am I missing something?

    Thanks again mate!

Comments are closed.