Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / web / HTML

Scrollable div which allows single finger scrolling on iPad

0.00/5 (No votes)
17 Jun 2013CPOL 26.9K  
The following will provide a quick guide on how to add a scrollable frame which will allow one finger scrolling on ipad (and will also work on desktop browsers)

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
// HTML:
 <div class="panel overflow">             
 </div>

In the CSS page add the following: 

CSS
// 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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)