Custom Scrollbars

February 26, 2015

Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

It always made me mega sad to look at the editor in Firefox or IE when using one of the dark themes in the CodePen Editor. WHITE scrollbars =(. And the problem was made worse now that we offer the option to turn off wrapping, you can potentially have scrollbars both directions.

Pretty unacceptably nasty.

Fortunately the ever-excellent CodeMirror offers a custom scrollbars add-on. We should done this sooner, because it works great. Normally I'd be hesitant to slap on JavaScript to replicate something the browser does for free just to style it, but... CodeMirror is doing all this scrolling calculation stuff anyway, so it's not much additional overhead. And then we get to style it!

If you were using Blink/WebKit browsers before, you probably won't even notice, because we were styling those already with ::-webkit-scrollbar stuff. But now we've ditched all that and are using this, which means the scrollbars are consistent in all browsers! Yay!