iScroll v3.4 shrinks and loves desktop browser

Frameworks for mobile platforms are coming out quickly. What was pioneering not more than two months ago is now everybody’s land. In this scenario does it still make sense to develop stand alone scripts like iScroll? Short answer: yes.

Do you really want to include a 176kb framework (yes, AdLib is that big, minified) into your application just to have a scrolling region? Your whole application is probably smaller than that. (Also note that you can’t probably redistribute AdLib, but it was just an example).

I don’t hate frameworks, I love them actually when they are well done. Developers are lazy (myself included) and clients are stingy, so frameworks merge these two devastating factors and make everybody happy.

In my very humble opinion we have not reached the point where we can ignore speed and size optimization on mobile devices. You can probably give any kind of framework to your desktop browser, but not to your mobile device. CPU cycles are precious on smartphones (and tablets), you cannot waste them.

The solution would be to create a serie of specialized, optimized and reusable micro-frameworks, snippets of code and widgets in the do-one-thing-and-do-it-well philosophy. Starting today this is my mission.

Now get back to the raison d’être of this post. iScroll has been updated to 3.4. The news are:

  • The shrinking scrollbars are back. When you swipe the contents outside of the boundaries the scrollbars reduce in size (as in native iPhone applications, on Android this feature is disabled by default). It’s a very rough code but iOS4 will be out soon, many things will change and there’s no reason to invest time in a code that could be obsolete in 4 days.
  • Preliminary desktop browser compatibility. iScroll already works flawlessly on your desktop browser. If no touch event is found you can freely scroll your content the old fashioned way (ie: drag the scrollbar). Mostly for debug purposes you can now force the desktopCompatibility parameter and on Safari and Chrome you’ll get the same behavior as on a touch enabled device (ie: swipe and momentum). I’ll probably add Firefox compatibility in the near future.
  • Better momentum. A quick note about this one. iScroll uses a pre-calculated momentum formula to save resources. I don’t use timers (most of the other frameworks use them), the script is probably less flexible but performance-wise is unbeatable.

Get the new code.

14 thoughts on “iScroll v3.4 shrinks and loves desktop browser”

  1. Great, the updates & improvements keep coming!
    This is a brilliant script (i’m surprised it’s still in beta).
    Why will iOS4 a new feature out dated?
    This is browser based so an OS update wouldn’t effect it that much i wouldn’t think?

    1. iOS4 surely will integrate a new webkit (browser) engine that could add new features and introduce new bugs.

      If the new browser removes the -webkit-mask bug with hw accelerated CSS animations, the shrinking scrollbars can be done by adding 1 line of code.

  2. “The solution would be to create a serie of specialized, optimized and reusable micro-frameworks, snippets of code and widgets in the do-one-thing-and-do-it-well philosophy. Starting today this is my mission.”

    You’re my hero, man. 🙂

  3. This works really well, but I’ve come across a weird problem. Using Phonegap plus iScroll breaks the copy function BUT only in the iPad (simulator and device). It’s strange because the identical scripts compiled for iPhone work fine but for iPad copy paste stops working. (This is on Phonegap 0.9.1 and iScroll 3.3 & 3.4)

  4. Ciao, grande lavoro, ogni sito web che visito riguardare webapp per iPhone ti nomina.
    Comunque, ho creato il menu della mia webapp per iPhone usando la header bar classica dell’iPhone come handle per lo slidemenu, e tutto funziona, purtroppo però essendoci tanti bottoni nel div che vien fuori vorrei inserire lo scroll orizzontale, dando così allo slide menu un’altezza fissa e non variabile (che crea tanti problemi come per esempio quando si passa a landscape mode).
    Hai qualche suggerimento per eseguire quindi una fusione slidemenu-iscroll?

  5. “iScroll uses a pre-calculated momentum formula to save resources. I don’t use timers (most of the other frameworks use them), the script is probably less flexible but performance-wise is unbeatable.”

    That is true. I have all the scroller code out there available and this is by far the best starting point, the elegance of finessed tight code. Brilliant.

  6. “The solution would be to create a serie of specialized, optimized and reusable micro-frameworks, snippets of code and widgets in the do-one-thing-and-do-it-well philosophy”

    Right On Bro! I mostly agree
    I think if you are building a straight up iOs web app then a framework is acceptable if its small, but for websites that you want to work well on iOs devices and desktops what you said is the way to go. Thanks for all of your work.

  7. Hey, I’m playing with this script for a horizontal scrollbar. It’s worked for just about everything else (and works well, to boot – just needs a design refresh), but it causes problems with youtube embeds. Basically, it makes them jump out of their defined places up about 75 pixels. (Check http://shortformblog.com/?wptheme=iphone to get an idea).

    Any thoughts? I spent six hours thinking it was a CSS problem when I realized it was a Javascript problem instead. :/

Comments are closed.