iScroll 4.0 seeks beta testers

It has been a troubled pregnancy, but iScroll 4 is finally ready for beta testing. Here is a quick overview on the main new features of this stellar new release.

iScroll 4 is a complete rewrite of the two years old scrolling script, that’s why I’m not yet pushing it to the main project page. You can instead play with it on github or enjoy some demos I’ve baked for you (please continue reading for direct links).

The new features are not limited to:

  • Faster, smoother momentum (even on Android). Video | Demo.
  • Pull down/up to refresh. I’ve tried many solutions to get this famous fancy functionality, it’s still not 100% accurate, but still looks pretty good for a beta. Video | Demo.
  • Pinch / Zoom with gestures and double-tap. Video | Demo.
  • Snap to element. You can provide a list of elements and iScroll will snap to the top-left corner of each of them. Video | Demo.
  • Custom scrollbars. You can now customize the scrollbars at your likings with just a spoonful of CSS. Video | Demo.

In the package is also included a lite edition. iScroll is evolving and adding new features, but if all you need is a plain simple scroller you better use the no frills iScroll lite (10kb).

Version 4.0 final will also include onScroll and onZoomEnd events for a deeper level of hackability. What instead is missing and will be included in version 4.1 is: hash change support (if you access the page with #element-id) and full mobile+desktop browser support. (You can spot a couple of preliminary functions in the code that will be later used for this purpose).

What about form fields? This is a complex topic. There’s no simple solution to handle them on all the devices. One solution is to rebuild the controls with javascript, the other is to remove hardware compositing and scroll using top/left or marginTop/marginLeft. The iPhone4, iPad and latest Androids are powerful enough to handle the animations even on the software layer. The good news is that iScroll 4.1 will support software animations (to be desktop friendly), so you get full form fields compatibility for free.

Now please help me debug this beast so we can finally retire v3.7. The script is –as always– free, open source, and MIT licensed. (yes, Mr. Big Corporate, that means that you can use it freely and I won’t come over you asking for my share of chips. Sorry to stress on this, but you don’t know how many times I’ve been asked about licensing issues).

35 thoughts on “iScroll 4.0 seeks beta testers”

    1. On my HTC Desire with Gingerbread (via CyanogenMod), I can see row 40, but when the animation rests I can only see row 39. I think the issue is to do detection of screen dimensions.

      Very good though. The performance is way smoother on Android than it ever has been. Very excited.

    2. I think this is not related to iscroll itself, but the way the device checks/sets element dimensions. Placing the iscroll initialization on onload may probably help. One problem here is that I cannot test on all android device. On my HTC desire for example works as expected.

  1. Matteo, I’m quite happy to pass back any information you’d like about the Webkit browser in Android 2.3. Just let me know what you need 🙂

  2. Hi Matteo,

    first of all great work ! thank you!

    is there any way to combine snapping and no snapping areas in one single page? e.g. a page with a couple of full screen images at the top of the page and a text under it.
    i want the scrolling to snap on the images but behave normally when it comes to the text?

    thx!

    1. hi,

      thx for the answere but that’s not exactly what i ment with “normal behaviour”.

      the whole page has to scroll with iscroll because i’ve got some static menu bars at the top and the bottom of the page.

      what i want is two different behaviours with iscroll. it should snap – lets say the first 2000 pixels – and stop snapping at some point…

      thx!

  3. Hi Matteo
    I just tested the nested, simple and zoom on my iPhone 3GS and it scrolls like its oiled 🙂 and verry good with the zoom.
    I tryed to change the nested example to become like your 2wayscroll, but I didnt get it to scroll vertically, only horizontal with momentum to true.

    Are you going to make this so it will work like the 2wayscroll?
    Please, please, please 🙂 Or in other words, how much do you want? And when can I hire you to do it? The 2wayscroll is the best script ever, thanks so much!

  4. Just tried iScroll 4. Unfortunately it kills both safari and the iphone simulator. Both apps lock up completely while loading when either iScroll or iScroll-lite are included.

    Mac OS 10.6.6
    XCode v3.2.5
    Safari v5.0.3

    Sorry I can’t get any more debug info. The apps lock way to quick. If I give them any longer the whole system locks up.

    Have confirmed if I move back to v3.7 pages load fine

  5. Hello Matteo, “One solution is to rebuild the controls with javascript, the other is to remove hardware compositing and scroll using top/left or marginTop/marginLeft.”, would you mind to come up with a simple example? Form issue is quite important for me.
    Thanks a lot

    1. Thanks Matteo, the iphone looks fine for me once it removed some preventDefault call, but android – specially the select tag, it is quite plainful really

  6. Hi,

    is there any fix for the select boxes problem now?

    (select boxes open, but then is the scollbar destroyed (iPad))
    It’s really important for me.

    Where can i get the 4.0 beta (if there is fixed this problem)?

  7. Hi, Matteo.

    I recently attempted to convert a jPlayer-based iPhone Webapp for streaming music to iScroll 4.

    However, some change from 3.7 to 4.0 has made it such that the songs featured in a given playlist are no longer clickable (and thus not playable). Each song/list item is loaded dynamically with JSON. Wondering if there’s something about the newest version of iScroll that’s not playing nicely with the dynamic data.

    I’ve submitted the question to jPlayer developers. In the meantime, I thought I’d see if you had any thoughts…

    Regards…

    1. Have you tried using the destroy method of iscroll to reload the scroller after data load?

  8. First, thank you for your help/feedback.

    Here’s a test page, using the original CSS and keeping all iScroll settings at default: http://www.myleakedlist.com/m/test_iscroll.php

    Applying V4, songs play on click/touch in both Chrome and Safari (desktop), but not in iOS — initially.

    If you select a song, jPlayer is activated, but the song doesn’t load. However, if you then tap the FFW button, the next song loads and begins playing, as intended.

    Thus, I think I can now eliminate iScroll as the problem and conclude definitively that the error is somewhere in the play functions of my JavaScript file. TBD what that is.

    One other thing I’ve noticed… The V3-implementation recognizes the length of the dynamically populated list as you move from one view to the next (without use of the destroy function), and the iScroll adjusts to the length (it’s a little jerky, but it adjusts). With V4, and using the same CSS, I can only replicate the same behavior after flipping the phone to landscape from portrait (or vice versa). Thoughts?

    Also, should I move this to the google group?

  9. Ciao Matteo.
    Parlo in italiano perchè mi viene più semplice.
    Comunque, come faccio a risolvere il problema dei form in iOS? Non ho capito bene come fare. Mi puoi dare una mano?
    Comunque grazie mille per questo fantastico progetto.

    Ciao!

  10. Hey Mate,
    Thanks a bunch for your effort, how do we go about helping you beta test?

    Cheers,
    Ro

  11. Awesome!
    The snap feature coupled with zooming will make for a nice image gallery solution ( with a few tweaks ) if displayed in a horizonstal scroll. It almost works perfectly now, just needs a threshold switch before ‘snap’ takes place based on the current zoom level.

  12. On Samsung Galaxy Tablet, myScroll.destroy() does not remove CSS properties related to scrolling.

    In my code, I had to remove ‘-webkit-transition-property’ CSS property from the scroller.

    Expected behavior: destroy() rolls back any changes maid by iScroll.

  13. I added buttons to test and display a popup or alert window. The browser URL address bar moves back into view (scrolls to top). I put in window.scrollTo(0, 1) trying to control it from my code but it is flaky and would be real messy.

    Any chance this can be fixed so the browser doesn’t scroll to the top?

    Thanks

  14. hi Matteo, this is a great tool, in fact, I’m using it on my web site 😉 but I found some strange :S with the pull down event. I have a big list of items, and make a couple of call from the pull down event, but at the third or fourth call, all my items disappear :S

    I’m still looking what could be the reason of this

    1. Hello Matteo, looks like the bug is on safari and not in th iScroll4, this ‘couse on firefox works fine, but when I put a lot of images on safari, it’s crashes :S maybe ‘couse the cache handle :-/ anyway, I’m looking for a work around to use on my page, now, I’m trying to combine snap & pull to refresh 🙂

  15. First, thank you for your great script!!!
    i love your fixed fooder. but i have a little problem…

    1) i saved as a web app on my iphone-homescreen.
    2) i chanced the link –remove row

    to

    –test

    in safari it works perfect! but if i run it in the web app, the link to google open in a new safari-window – not in the web app.

    is there a chance to fixe this…?
    i didn´t find any solution.
    ore did you have a other option to run direct-links it inside the web app?

    i hope you ca help me.

    and sorry for my bad english.
    greetz vom germany

  16. Works great when working with it in Dreamweaver CS5.5, but can not scroll on iPhone lockscreen.
    Used it in a LockBackground.html page on iOS5.0.1.

Comments are closed.