Scroll like you are oblivious to the browser!

It's the age of modern apps. In these modern apps, unquestionably, we want scrollbars look and behave the same way in all the browsers and in all operating systems. Scrollbars can be an important part of the design. Look at the CSS Tricks website, how beautifully they have integrated their scrollbar as a part of their design. The web is more than 20 years old but there are still scrollbar still pretty much remains hard to style. Styling scrollbar is the poster child of CSS complaining, Why does it have to be so hard?

Before we look at the solutions, first let's take a look at how scrollbars styling can be done in different browsers.

Safari, Opera and Chrome (Webkit, Blink browsers)

Webkit browsers support styling of scrollbar, you can change the track and thumb width color and a lot of other things for eg:

::-webkit-scrollbar {
    width: 15px;
    height: 15px;
}

::-webkit-scrollbar-track-piece  {
    background-color: #C2D2E4;
}

::-webkit-scrollbar-thumb:vertical {
    height: 30px;
    background-color: #0A4C95;
}

There is a detailed list of all the ::-webkit-srollbar prefixed options that could be found here

Note: Pseudo element ::-webkit-scrollbar is a non-standard implementation, which allows us to modify the look of the browser's scrollbar

Firefox (Gecko)

As of version 64 Firefox supports the official scrollbar styling through the properties scrollbar-color and scrollbar-width for eg:

  .scroller {
    width: 300px;
    height: 100px;
    overflow-y: scroll;
    scrollbar-color: rebeccapurple green;
    scrollbar-width: thin;
  }

Details about that could be found here

There's a caveat (Curious case of disappearing scrollbar): The auto-hiding semi-transparent scrollbars that are the macOS default cannot be colored with this rule (they still choose their own contrasting color based on the background). Only the permanently showing scrollbars (System Preferences > Show Scroll Bars > Always) are colored.

Well that's not pretty. There has to be a solution. Why is it so hard??

Custom scrollbars

One of the solutions can be not to use native browser scrolling. We can create our very own div where we define a js based scrolling, this way we can completely control how scrollbars look and feel. But that’s expensive, low fidelity and can feel laggy.

I was looking for a scrollbar for a long time, till I found out Simplebar.

With Simplebar, we can leverage some unconventional CSS matrices to build a custom scroller that doesn’t require any JavaScript while scrolling, just some setup code.

According to the Simplebar readme, For the most part SimpleBar uses the browser's native scrolling functionality, but replaces the conventional scrollbar with a custom CSS-styled scrollbar. The plugin listens for scroll events and redraws the custom scrollbar accordingly.

Key to this technique is hiding the native browser scrollbar. The scrollable element is made slightly wider/taller than its containing element, effectively hiding the scrollbar from view. It uses MutationObserver to listen to browser events.

Let's get implementing

You can take any div and initialise simplebar with new SimpleBar(document.getElementById('myId')). Apart from styling there are various options available such as autoHide.

It is just so much fun to use. The only thing to keep in mind is, when you are adding a Simplebar to a div, make sure that the div has a height or width so that Simplebar can decide, which scrollbar to add horizontal or vertical.

Specially in case of horizontal scrollbars. Let's look at an example. Let's say we have a container. Inside we have 100 divs each of width: 10px. Usually to make it scroll horizontally, we need to add some styles to the container like width: 1000px; overflow-x: scroll; (of course there has to be other styles like display: inline-block; etc, but that's not the focus of this article)

But the problem arises if we have dynamic content. For every render we need to change the width of the div.

In this case Simplebar works like a charm. All you need to do is, mention a width after surpassing that it should scroll, let's say width: 100vw;
it will make it scroll :) Simplebar also provides with a recalculate() function, in case the the MutationObserver doesn't pick up a change.

End Note

Simplebar is just so easy, it hits clearly on the problem without messing with browser scrolling behaviour. Easy to setup and customise. There are wrappers available for React and Vue. And finaalllyyyy we have a cross-browser, cross platform, lightweight and performant solution to the scrollbars in modern apps.

Photo by Leo Rivas on Unsplash