Awwwards
Blog

A place where we talk SharePoint, web design, inspirations, trends and everything in between.

Making the SharePoint 2010 Ribbon scroll like a normal site!

So Microsoft decided to dock/stick/fix the ribbon to the top of the page like so.

Whilst in my session I covered how to make this scroll and gain a lot of questions – Why did they do this? and what is the fix? Well the fix is very simple. But for the ‘why’ I am not sure why. I think they wanted people to also have access to the ribbon much to how the other Office applications work.

  1. First thing you need to do is remove or change scroll=”no” to “yes” in the <BODY> – this will make the page scroll conventionally.
  2. Next you need to remove or change the “s4-workspace” ID tag from line 293 (in v4.master).
  3. I usually just rename it to s4-workspaced so if you need to change it make, you can just remove the ‘d’
  4. Next you need to add some CSS either in a referenced custom stylesheet or directly in the masterpage. The CSS code is very simple it is – body {overflow:auto!important;}

And this should make your page scroll. Fairly straight forward but probably the most requested ‘feature’ to remove when I am branding SharePoint 2010.

Please note – this will mean that if you have a large page and you need to edit the properties you will need to scroll back up.

Comments

comments

6 thoughts on “Making the SharePoint 2010 Ribbon scroll like a normal site!

  1. Hello,

    this is an interesting post but you must be careful with that. I did it your way for a custom website but this is not fully compatible with the calendar.

    If you scroll on the page, the “add” button which appear on the day you are hovering won’t be on the good day. It seems that the js above calculate the place to display depending of the top of the page.
    So the more you scroll the farther the button will be from the good place.

    I hope it was understanding

  2. The “Why” is because when you are editing page content and you try to select a Style or Markup style from the ribbon menu, it jumps back down to your content – to show dynamically the effect of your selection – and thereby losing focus off the menu, rendering it useless.

    A good source from the microsoft mouth that developed the ribbon can be found here:
    http://sharepoint.microsoft.com/blog/Pages/BlogPost.aspx?pID=426
    This tells you clearly all of the elements at play – and how to correctly turn on and OFF the scrolling.

    Cheers,
    Ben

  3. Hey Ben,

    Thanks for your post, appreciate that. The point you make is a very good one and equally valid. In our experience this “way” of doin things, presents a load of headaches (things not scrolling, cross browser scrolling, if page load is large etc). Hopefully they will address this in SharePoint 15. We hope!

Comments are closed.

awards & recognition
PinkPetrol on awwwards.com PinkPetrol on webguruawards.com PinkPetrol on cssdesignawards.com PinkPetrol on csswinner.com PinkPetrol on csslight.com PinkPetrol on Find Web Agency