For Want of a Scrollbar

The start of an adventure usually starts when I tweet an annoyance:

Who has two thumbs and regularly disables Sharepoint’s overflow: hidden CSS to re-enable the scrollbar? Me…

A coworker asked a good question, which is, “Any easy/lazy way to make it automatic-like?”

My response was a Greasemonkey script should do the trick. Okay, so, how to make it happen?

Pretty sure like me, my coworker uses Chrome. This is good, because in 2009 Chrome acquired native Greasemonkey script support. They are treated as Extensions. I like this because there is one place to look for the scripts rather than a separate queue like I am familiar in Firefox’s Greasemonkey plug-in.

So I found some pages on writing Greasemonkey scripts. What I wanted to do looked easy enough. Which, of course, meant I spent a few hours stumbling around the Internet confused why it did not work. In the end, I wrote this <filename>.users.js did the trick:

// ==UserScript==
// @name Sharepoint Scrollbar Fix
// @namespace http://sharepoint.oursite.com/
// @description Removes the overflow:hidden which is buggy in WebKit browsers
// @include https://sharepoint.oursite.com/*
// ==/UserScript==
document.body.style.overflow = “scroll”;

From my research WebKit browsers have an issue with overflow:hidden going back years. Chrome and Safari are WebKit browsers. (Guess I could have saved myself time just using Mozilla.) Using either overflow:scroll, overflow:auto, or even removing overflow brings out a second usable scrollbar.

Probably GM_addStyle is a better approach, but this one worked first.

Protocols matter. Most of the time I spent confused was solved by having http in the @include address when the Sharepoint site uses https.

Testing it was interesting as Google does not allow just downloading from anywhere on the Internet. So uploading it to my web site was not a good way to get it into the browser. Just open up Extensions and drag and drop the file in there. It prompts to make sure you are. In the end, it is much more efficient that way.

Conclusion: Pretty easy to create and test. Very lazy fix. The information online about making one is not great.

Any coworkers who want to use it, I added it to the Content area on my site.