8

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!

asp_net
  • 3,567
  • 3
  • 31
  • 58

3 Answers3

14

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.

asp_net
  • 3,567
  • 3
  • 31
  • 58
  • 1
    Initially I was using iScroll, but it conflicted with fullCalendar. Later I've tried YUI ScrollView and Scrollability, but unfortunately was not able to make them work in my project... but jScrollPane worked like a charm! Thank you. – Victor F Jan 19 '12 at 15:49
  • 2
    Fought with iScroll 4 for months, 30 seconds with jscrollPane and my html is lighter. – Matthew Bonig Jun 14 '12 at 00:28
11

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.

Taco Suave
  • 123
  • 1
  • 4
  • yep, that has beein introduced with iOS 5 (quite a while after I asked for it last summer) – asp_net Aug 17 '12 at 13:18
  • 1
    I've used this approach and that's what led me to this post. It's horrible. The events that it fires are totally unpredictable, making it hard to use on anything serious where you care about when the user stops scrolling. – Kir Sep 05 '12 at 11:59
1

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).

1nfiniti
  • 2,032
  • 14
  • 19