4

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 – Robert Lindgren Oct 21 '14 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 '14 at 12:20
  • Hmm, how do you get ribbon on that page? Non of my users has the ability to show ribbon there. – Robert Lindgren Oct 21 '14 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? – Robert Lindgren Oct 21 '14 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 '14 at 12:31
3

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...

| improve this answer | |
  • 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 '14 at 8:37
0

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);
    } 
});
| improve this answer | |
  • 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 '14 at 9:01
  • @moe add above code in master page and let me know. – Amal Hashim Oct 23 '14 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 '14 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.