Click here to Skip to main content
Click here to Skip to main content
Go to top

Scrollable div which allows single finger scrolling on iPad

, 17 Jun 2013
Rate this:
Please Sign up or sign in to vote.
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:
 <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

License

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

Share

About the Author

gcrawley02
Software Developer (Junior)
United Kingdom United Kingdom
My name is Gavin Crawley. Im 24 years old from Derry, Ireland. I work as a .NET developer for Pramerica Systems Ireland.
Follow on   Twitter   Google+

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web03 | 2.8.140916.1 | Last Updated 17 Jun 2013
Article Copyright 2013 by gcrawley02
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid