Click here to Skip to main content
13,054,779 members (76,074 online)
Click here to Skip to main content
Add your own
alternative version


3 bookmarked
Posted 17 Jun 2013

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)


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">             

In the CSS page add the following: 

// CSS:
   width: 100%;
   height: 330px; /* fixed height of div */  
   -webkit-overflow-scrolling: touch; /* allow touch scrolling in webkit browsers */
   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!


version 1.0


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


About the Author

Software Developer (Junior)
United Kingdom United Kingdom
This member doesn't quite have enough reputation to be able to display their biography and homepage.

You may also be interested in...


Comments and Discussions

-- There are no messages in this forum --
Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170713.1 | Last Updated 17 Jun 2013
Article Copyright 2013 by gcrawley02
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid