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.)?
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.
You need to add style="overflow-y:scroll;" to the div tag. (This will force a scrollbar on the vertical).
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.
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 .
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 :-)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With