QUERCUS BLOG
Industry Insights from Our Experts

Fixing “vertical scrollbar disabled” issue in SharePoint 2010

Filed under JavaScript, SharePoint

One UI element of SharePoint 2010 that can and does cause a lot of problems with branded sites is the vertical scrollbar. Due to the need to keep the ribbon at the top of your browser window, SharePoint has to disable standard browser scrolling and implement its own version using CSS and JavaScript.

For various reasons the vertical scrollbar can become disabled for some or all browsers and prevent users from scrolling to see content further down.

To come up with a solution to this problem, it is important to have an understanding of how SharePoint handles the ribbon placement and enables scrolling on the page. This blog post provides an excellent walk through of this.

Search this issue and you will find a lot of suggested solutions, but most of these come with some drawbacks. In particular be wary of solutions that mention modifying CSS for the s4-workspace div. That div contains the main content of your SharePoint page and this is the div that SharePoint itself applies scrolling to.  Be very careful making CSS changes around this div as it can come back to haunt you on dialogs, notifications or menus elsewhere on your site.

SharePoint uses JavaScript to apply scrolling to its pages. In particular the FixRibbonAndWorkspaceDimensions() method of init.js gets called during a page refresh and it is in here that scrolling is setup.

Unfortunately for me and many others, something else can interfere after this method call that seems to undo it’s good work and breaks the scrolling.

In order to fix it I copied some JavaScript from the FixRibbonAndWorkspaceDimensions method. I took the piece of code that checks the window height, the ribbon height and calculates what the main content height should be. Applying this information again at the bottom of your master page fixes the scrolling problem.

   1:  <script type="text/javascript"> 
   2:         var elmRibbon=GetCachedElement("s4-ribbonrow"); 
   3:         var elmWorkspace=GetCachedElement("s4-workspace"); 
   4:         var    vph=GetViewportHeight(); 
   5:             var newWorkspaceHeight=vph - elmRibbon.offsetHeight - AbsTop(elmRibbon);
   6:   
   7:         if(newWorkspaceHeight < 0) 
   8:             newWorkspaceHeight=0; 
   9:         elmWorkspace.style.height=newWorkspaceHeight+"px"; 
  10:  </script>

I added this just before the closing Body tag </body> of my masterpage and it has fixed the issue in IE, Chrome and Firefox.

Note:

The function calls GetCachedElement, AbsTop and GetViewportHeight are all found in init.js.

This post does assume that you are using a customised version of v4.master.

Copyright 2017 by Quercus Solutions
Login