How can I implement a scrollable on iPad?

Question

I have a page which uses a scrollable <div>:

<DIV style="OVERFLOW-Y: hidden; WIDTH: 928px; OVERFLOW: scroll">
...Huge Content
</div>

Now while it works fine in desktop browsers, I am unable to scroll on the iPad.

Could you please provide a solution (preferably without the use of any 3rd party frameworks like Sencha, etc.)?

Answer 1

With iPhone and iPad, you can scroll individual elements by placing two fingers on them and dragging.

• http://support.apple.com/kb/ht1484
• http://wyattlecadre.wordpress.com/2010/11/20/ios-quick-tip-two-finger-scrolling/

_{...which makes this less of a programming question really :-)}

Answer 2

I realize that this is an older question but there is now a much better solution. We now have access to the -webkit-overflow-scrolling: touch; css element. See here for a demo

Answer 3

There is no easy, native way to make divs scrollable with one finger, as if it were a full screen panel. You can use two fingers like Andy E says, however I doubt whether most users will know about this, and it's not very discoverable IMO.

Sencha etc can do it, however it's not real (i.e. native) scrolling, it's using all sorts of Javascript trickery to approximate it, and is liable to slow down and behave badly if you're doing anything else complex...

That said, web apps like Yahoo Mail on the iPad seem to make it work quite elegantly.

Answer 4

I've had good success with this problem with the help of this little project: http://cubiq.org/iscroll.

Scroll down to "how to use".

EDIT, try this for only horizontal scroll (using iScroll):

HTML:

<div id="wrapper">
    <div id="scroller">
        Huge Content...
    </div>
</div>

CSS:

#wrapper {
    position:relative;
    z-index:1;
    width: 926px
    height: 200px;
    overflow: hidden;
}

JavaScript:

function loaded() {
    document.addEventListener('touchmove', function(e){ e.preventDefault(); });
    myScroll = new iScroll('scroller', {vScrollbar:false});
}

document.addEventListener('DOMContentLoaded', loaded);