Enable one-finger-scrolling in SP2010 for iPad and iPhone

You want your iPad users to be able to scroll your SharePoint 2010 site with one finger.

It can be done with the two finger swipe but it doesn’t work as well and visitors may not know that. The solution involves using CSS to disable the – ribbon positioning system – so that the ribbon is no longer stuck at the top of the browser. But at the same time you don’t want the ribbon positioning disabled for browsers on the desktop. Because that is where the content owners are likely to do their editing and they are going to want the items on the ribbon available to them.
So this solution also involves using a media query to detect that the site is being visited by a device. With a CSS media query only those browsers that meet the requirements will be given the extra styles.
Here is all the special code that you will need. with comments to indicate what each element is for. Just copy and paste this into your custom CSS file.

/* for media that has a screen no larger than 768 pixels */
@media (max-device-width: 768px){
 /* set the BODY of the site to be whatever size the content is*/
 body.v4master {
 height: auto;
 width: auto; /* and let the scrolling happen normally */;
 overflow: auto!important;
 }
 /* same for the section below the ribbon */
 body #s4-workspace {
 overflow: visible!important;
 height: auto!important;
 width: auto!important;
 }
 /* cancel the width on the next item */
 #s4-titlerow {
 width: auto!important;
 }
}

Revolutionize Your Business With Generative AI

From product design and software development to virtual agents, content creation, and reporting, GenAI is transforming business. Our AI experts help you unlock GenAI’s full potential and drive growth.

Let’s Get Started

 
Here is again without comments and I added two more styles that I think you should have to make sure everything is cleaned up. The code above will work but the code below can stop issues down the road.

@media (max-device-width: 768px){
 body.v4master {
 height: auto;
 width: auto;
 overflow: auto!important;
 }
 body #aspnetForm {
 height: auto;
 }
 body #s4-workspace {
 overflow: visible!important;
 height: auto!important;
 width: auto!important;
 }
 body #s4-bodyContainer:after {
 content: ".";
 display: block;
 clear: both;
 height: 0;
 line-height: 0;
 font-size: 0;
 }
 #s4-titlerow {
 width: auto!important;
 }
}