Scrollable div which allows single finger scrolling on iPad

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

// HTML:
 <div class="panel overflow">             
 </div>

In the CSS page add the following: 

// CSS:
.panel
{
   width: 100%;
   height: 330px; /* fixed height of div */  
   -webkit-overflow-scrolling: touch; /* allow touch scrolling in webkit browsers */
 }           
 
 .overflow
 {
   overflow: scroll; /* set overflow to scroll for desktop browsers */
   overflow-x: hidden; /* hide scrollbar on x-axis */
 }
 

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