We’ve been working on an mobile version of a SharePoint 2010 implementation for a customer recently, specifically generating an iPad version of elements of their intranet. It’s been very interesting getting used to developing for the various touch events and also coding to cope with the way the iPad copes with scrollable divs. As part of the process, we needed to make the rest of the intranet work with standard single finger scrolling with the ribbon in place, which SharePoint 2010 doesn’t do out of the box. Here’s how to fix it;

Update 23/09/2011: As pointed out by a couple of people in the comments, there are some issues around using this fix and some elements of certain types of page no longer working (namely some select boxes). A potential fix is linked to in the comments, but for reference have a look at this;

The standard version of SharePoint uses a fairly complex javascript system to position the ribbon so that it sticks to the top of the screen and the rest of the body scrolls underneath it, which we need to work around. We can do this in two ways. We could use the earlier fix we have described on this blog to fix the ribbon positioning to work in a different way, which would give us the scrolling body back, which makes one finger scrolling work again. However, as stated in the update of that post, there has to be a javascript fix added to solve the dropdown menus so you should decide if you want to use it or not. So, as an alternative, here’s another way that works more with out of the box stuff. (This solution is based on the out of the box v4.master master page file). This should work for both iPad and Android devices (if you turn off mobile view it should work for iPhone too), but has only been tested on an iPad.

Aside: If you want this to work on just an iPad, you could conditionally execute the code based on something like the user agent string, like so;

if (navigator.userAgent.match(/iPad/i) != null) {
// execute code here
}

For this fix we are going to use a javascript library we found while doing the main part of the project, the excellent iScroll 4. We recommend you check it out if you are developing web pages for mobile devices. So, download the iscroll.js file from that site, add it in to your site somewhere (for this example we’ll just use the root of the style library, but put it wherever you keep your javascript files), and then link to it from your master page in the head element like so;

<script type="application/javascript" src="/Style%20Library/iscroll.js"></script>

Then, we need to add in some javascript code to set up the iScroll for the main body area, and also keep it up to date when the ribbon is dynamically changed by SharePoint. So, beneath the line above or in an external js file which you then link to, add the following code;

var bodyscrolldiv, bodyscrolldivinit = false;

function loaded() {
ExecuteOrDelayUntilScriptLoaded(function () { SP.UI.Workspace.add_resized(mobilebodyscroll); }, "init.js");
}

function mobilebodyscroll() {
if (bodyscrolldivinit) {
bodyscrolldiv.refresh();
} else {
bodyscrolldiv = new iScroll('s4-workspace');
bodyscrolldivinit = true;
}
}

document.addEventListener('DOMContentLoaded', loaded, false);

This will cope with the ribbon events as different tabs are clicked and it gets shown and hidden, etc. To finish and make it work though, we also need to change some html.

We need to wrap everything inside the div with the id ‘s4-workspace‘ with an additional div, so that the scroll can be effectively applied to it and work. This additional div needs the style attribute set against it of ‘overflow: auto;‘  We’d recommend doing this with a class, and then a declaration in a style sheet, but will show it here as a style attribute for ease of readings sake;

<div id="s4-workspace">
<div style="overflow:auto;">
... the s4-bodyContainer div and other content elements...
</div>
</div>

And that’s it. This now works for us. You can scroll the page with one finger in both orientations and with/without the ribbon, and still get to ribbon dropdowns and so on, and everything copes with the various heights.

So there you have it, a fix to let you enjoy SharePoint 2010 as it was intended on your iPad or Android device!