CODEWITHSUNDEEP
javascripthtmlcssipadsafari
hmthr
hmthr

Reputation: 7971

How can I implement a scrollable <div> on iPad?

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

Upvotes: 10

Views: 14721

Answers (4)

davehale23
davehale23

Reputation: 4372

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

Upvotes: 5

Jon Nylander
Jon Nylander

Reputation: 8963

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

Upvotes: 1

Andy E
Andy E

Reputation: 344497

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

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

Upvotes: 6

funkybro
funkybro

Reputation: 8671

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.

Upvotes: 1

Related Questions