Introduction
The snippet will show users how to create a scrollable div which allows one finger scrolling on the ipad, and on desktop browsers it will provide a scrollbar if the data overflows. This is useful due to Apple forcing users to use 2-finger scrolling which isnt always accurate and not all users know about it.
Using the code
In the HTML page add the following div
// HTML:
<div class="panel overflow">
</div>
In the CSS page add the following:
.panel
{
width: 100%;
height: 330px;
-webkit-overflow-scrolling: touch;
}
.overflow
{
overflow: scroll;
overflow-x: hidden;
}
Points of Interest
Once this has been added all objects inside the div that overflows the set 330px height in the example above will be scrollable and will allow single finger scrolling on ipad. Hope this helps!
History
version 1.0