Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 636
hmthr Avatar asked May 12 '11 09:05

hmthr


People also ask

How do you make a div scrollable?

For vertical scrollable bar use the x and y axis. Set the overflow-x:hidden; and overflow-y:auto; that will automatically hide the horizontal scroll bar and present only vertical scrollbar. Here the scroll div will be vertically scrollable.

How do I add a scrollbar to a div?

You need to add style="overflow-y:scroll;" to the div tag. (This will force a scrollbar on the vertical).

Can div have scrollbar?

Background. In HTML, there is a division container - or <div></div> - that can encapsulate HTML data and elements. This data can then be manipulated using CSS styling and JavaScript. Among other features, you can also add a scrollbar to your div container with CSS.

What is a scrollable element?

A scrollable element is an element with a horizontal scroll distance or a vertical scroll distance greater than 0. horizontal scroll distance: The difference between scrollWidth and clientWidth for elements where the computed overflow-x is auto or scroll .


1 Answers

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

like image 149
Andy E Avatar answered Oct 18 '22 22:10

Andy E