Question

I’m making an iPad web-app, and the client would like it to have two panes (both separately scrolling), much like the iPad settings app. What is the best way to go about this while still maintaining compatibility with older versions of iOS?

Thanks!

EDIT: I forgot to mention that it should seem somewhat native, so no two finger scrolling.

Answer 1

you could just use two container elements (DIV for example) and use the following styles

#first,
#second {
  float: left;
  height: 500px; // or whatever fits your needs
  width: 50%;
  overflow-y: scroll   
}

please note than in iOS overflowing content needs to be scrolled with two fingers when using it in a Web Application and it is not possible to do this with one finger like in an native application.. see also the Safari Web Content Guide