How can I implement a scrollable on iPad?

Question

I have a page which uses a scrollable

:

...Huge Content


        

相关标签:

Answer 1

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

Answer 2

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