Looking for an alternative for iScroll (Scrolling Div's on iOS/Webkit)

Question

I built a complex forms over data mobile application and am now looking for a solution to persist the position of the title and the footer bar. In my dummy, which has been developed and tested with Chrome and Safari on my desktop, I just positioned the header and the footer absolute, as well as the content section, which height is set by JavaScript on the windows' resize event.

That's not a proper way for the mobile world, because overflow:auto isn't supported on mobile WebKit.

I tried some things by my own and I took also a look at iScroll. In fact, iScroll crashed safari on my iPad while the application without that component runs quite smooth. I have a lot of relatively complex forms, which may be a challange for iScroll, which can't be won I think.

So I am looking for other ways to achieve my goal (persist header and footer) without letting the user use two fingers for scrolling (in fact, almost nobody knows that "trick").

Any suggestions?

Thanks!

Answer 1

So there are three commonly mentioned solutions:

1. iScroll
2. YUI ScrollView
3. Scrollability

They're all very neat for scrolling through simple lists. But no one really works if it's purpose is to handle full pages with more than just a list, for example complex dialogs with dynamic forms and so on.

I just decided to give up and wait a year - Apple has lately announced its support for position:fixed and overflow:scroll, which will revolutionize this part and solve all that kind of problems we have today.

Today I remembered a website of a company in our building here in Munich, opened it with the iPad, and indeed, it had a scrollable news section on its frontpage. So I looked inside and saw that it is using ... tadaaa ... jScrollPane.

I don't think jScrollPane was developed for using it on mobile devices, but it has been optimized for that purpose, too. It just works on my iPad, my Android 2.3 and also on the latest Opera Mobile.

It doesn't feel like scrolling a native app on a mobile device, but it allows you to see a fully customizable scrollbar, jump to top and to buttom and, what's most important, to scroll with one finger.

Very nice.

Answer 2

Mobile webkit now supports scrolling using only CSS. Create a class 'scrollable' and add the following rules:

    .scrollable {
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
    }

Add your 'scrollable' class to any block element that requires scrolling. Webkit Only.

Answer 3

https://github.com/filamentgroup/Overthrow/

Lightweight polyfill based solution that let's modern browsers with overflow:scroll support do their thing.

Still in early phase of development, but works pretty well on the largest affected user base (android 2.2/2.3/iOS<5).