Using Google Chrome I'm struggling with an issue which scrolls also the top ribbon of the SharePoint 2013 page. This happens when a page is scrolled to the bottom of the page by clicking the middle mouse button and moving to the bottom of the page.

This can be also seen if the middle mouse button is clicked over the ribbon, as the ribbon can be scrolled.

How to prevent the scrolling of the ribbon?

Update: I noticed that once middle mouse click + scrolled with Firefox, this does not happen. However when I use page anchors (e.g. Page.aspx#header2) the scrolling does occur on the suiteBar/ribbon.

It strongly seems like there's a hidden scrollbar within the suiteBar.

  • Where does this happen? Can you attach screenshots? I'm having troubles reproducing this Oct 21, 2014 at 12:16
  • It seems to require a "longer" page (such as a list with quite many items). If you have access to CA, e.g. the Job Definitions page @ /_admin/ServiceJobDefinitions.aspx has quite many items, and the issue occurs once scrolling as described.
    – moe
    Oct 21, 2014 at 12:20
  • Hmm, how do you get ribbon on that page? Non of my users has the ability to show ribbon there. Oct 21, 2014 at 12:26
  • I have seem to get the same issue when scrolling on a normal publishing page. The content above ribbon scroll out of view if scrolling while holding the mouse above the ribbon. Is that what you mean? Oct 21, 2014 at 12:28
  • You're correct about the ribbon. What i meant was the ribbonrow element with the suiteBar element (= the top of the page basically). And yes, I mean the content above the ribbon (suiteBar area). Didn't realize the misleading question until now.
    – moe
    Oct 21, 2014 at 12:31

2 Answers 2


I was able to fix the problem by applying position: fixed to the html-Tag:

html {
  position: fixed;

Of course, this might have some unwanted side effects for other positioned elements (outside of s4-workspace)... But at first sight, everything still seems to work as expected...

  • Tried it. Seems to work! I'm also a bit suspicious whether there'll pop up a next issue this change causes. I'll keep on testing a bit more before accepting this as an answer.
    – moe
    Oct 28, 2014 at 8:37

This is happening because of #s4-workspace style having overflow:auto. I found this by removing it using the developer tools.

$(document).ready(function() {
    var isChromium = window.chrome,
    vendorName = window.navigator.vendor;
    if(isChromium !== null && isChromium !== undefined && vendorName === "Google Inc.") {
        // is Google chrome 
        var height = $('#s4-workspace').css('height');
        height = height - 100;
        $('#s4-workspace').css('height', height);
  • I tried this, and it also disables all scrolling on the page? This does not help me, of course I need to scroll the actual content of the page.
    – moe
    Oct 22, 2014 at 9:01
  • @moe add above code in master page and let me know. Oct 23, 2014 at 15:42
  • This does not do it. I'll also update the start question as I've noticed a similar issue with Firefox too.
    – moe
    Oct 24, 2014 at 7:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.