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

javascript html css ipad safari

13,752

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

Solution 2

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 :-)}

Solution 3

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

Solution 4

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.

View more solutions

13,752

Author by

hmthr

Updated on July 19, 2022

Comments

hmthr almost 2 years
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.)?
hmthr almost 13 years

Do you have any Apple Support URL on the same (like where they say use 2-fingers for fixed width/height div)
hmthr almost 13 years

I am not sure if you are correct when you say "no way to make divs scrollable with one finger"...You can see the demo below on an iPad; cubiq.org/dropbox/iscroll/index.html?v=3.7.1 And yes, it does not seem to slow down the scrolling...
hmthr almost 13 years

Is iScroll free for commercial use? Are there any license issues?
funkybro almost 13 years

I've edited my answer to clarify. It can't be done out of the box, e.g. by simply adding a CSS tag or whatever. Your example uses iScroll which does the same sort of JS trickery as Sencha.
Andy E almost 13 years

@hmthr: close to that; the support page only says "frames" but it works for all scrollable elements. I've added it to my answer anyway.
hmthr almost 13 years

Also how do I customize it to do horizontal or vertical scrolling ?
Jon Nylander almost 13 years

It is MIT licensed so yeah, free for commercial use. As to horizontal or vertical scrolling I am not sure. It was some time since I implemented with it. But I would expect that if your overflows are correct and you have the right size on stuff it should work out automatically. Also you can disable the horizontal or vertical scrollbars independently.
hmthr almost 13 years

Hey Jon...Thanks a lot for the detailed example. I just tried implementing on my page and seem to be having 1 issue..There are some dropdowns within my scrollable area and those do not work when I use iScroll..Is this some kind of a known issue OR is there a workaround for that as well..Thanks again..
Jon Nylander almost 13 years

Yeah... hmm I remember having problems with form elements too.
Jon Nylander almost 13 years

Yeah, apparently a known issue. If you scroll through the issue tracker for the project code.google.com/p/iscroll-js/issues/list, specifically issue 1 and 10 seem to deal with your exact issue. That's too bad.
hmthr almost 13 years

Yes..right..the select box not being activated is the exact issue which I am facing, as listed in the issue link you gave..Since that is a requirement for my page (actually i have a lot of form fields in my page), I guess I'll have to look for some other solution for my scrollable div issue...
hmthr almost 13 years

@Jon : Just to ask you; In your opinion, do you think if we try to edit the iscroll.js, could there be a easy way to fix this if one does some analysis OR do you think some basic things might have already been tried by the iscroll developers and still the issue has not been fixed.
Jon Nylander almost 13 years

Since iScroll uses webkit CSS animations I think you will be fairly stuck with the form element problems. Just of the top of my head I would perhaps attempt placing elements (ex divs) on top of (higher z-index) than the form elements and see if I from them can forward the event I want to happen (presumably focus) to the underlying form element. But, If that seems dodgy or hard to get working I would probably abandon ship and go for another interaction design.
peteorpeter almost 13 years

Can you generically trigger two-finger events when the one-finger events happen? This would use the native scroll functionality with minimal JS. Something like onSingleDragStart() { doubleDragStart(); } etc. ?
hmthr almost 13 years

You're right...I'll abandon iScroll and look for some other solution..But anyways, thanks a lot and I MUST SAY THAT YOUR ANSWERS HAVE TRULY BEEN PERFECT, TO THE POINT...CAN'T ASK FOR ANYTHING BETTER..U ROCK !!
Vitim.us almost 12 years

two finger scrolling also works with overflow: scroll; <DIV>
Drahcir about 10 years

+1 Turns out my div was scrollable already, I just didn't know I had to use 2 fingers :)
Joel Harris about 7 years

Momentum scrolling FTW!