SharePoint 2010 Scrolling

View an updated cause and fix here that fixes more than just scrolling 🙂

Yes, this is one of ‘those’ posts, about how to fix/workaround the issue of SharePoint having the Body set to scroll=”no” causing issues with scrolling. As a recap for those unfamiliar with this design decision from Microsoft it causes a few side effects. This is all to support the ribbon by the way and every method I’ve seen to workaround it in the past has had bad effects on the ribbon.

  • Chrome OSX and Safari OSX have significant issues with scrolling on SharePoint 2010 Pages
  • Scroll=”no” is for fixing the ribbon and all sub-elements to the page in the right location. This includes buttons, mouse over information and menus. Not something to be trifled with.
  • By default you do not ever have a scrollbar when loading a 2010 page until the javascript loads for figuring out all the ribbon positioning and height.
Now, I have found a workaround for the first issue using some jQuery that does not have the normal side effects of causing issues with ribbon positioning and most importantly leaves ‘scroll=”no”‘ turned on.
**UPDATE** This is a small update that improves compatibility with NewsGator and other solutions that rely on some of the out of the box behavior with #s4-workspace 🙂
Remove the following line in your master page:
var _fV4UI = true; -This line is what loads the default ribbon and scrolling behavior in sharepoint.
Add in this (make sure jQuery is loaded before this line btw)

if($.browser.webkit || $.browser.safari)
//handle scrolling on less supported browsers like chrome 🙂
var h = $(‘#s4-workspace’).height();
$(‘#s4-workspace’).css(“height”, “auto”).css(“overflow-y”, “auto”).css(“min-height”, h);
//handle normal ribbon rendering and behavior on fully supported browsers
var _fV4UI = true;

Due to when this executed it fixes scrolling issues on OSX Safari and Chrome without the normal bad impacts. Though would be nice if Microsoft were to figure out a way to do the ribbon using pure-css rather than javascript hacks this is a functional workaround for the time being without impacting basic site usability.
  1. #1 by Palanivel on September 13, 2012 - 6:05 am

    Excellent article.

(will not be published)

%d bloggers like this: