Scroll like you are oblivious to the browser!
Tags: webdev, browsers, css, javascript
Published: 2019-07-05 15:22:10

---
title: Scroll like you are oblivious to the browser!
published: true
description: Styling scrollbars is big problem, but there is a solution.
tags: #webdev #browsers #css #javascript
cover_image: https://thepracticaldev.s3.amazonaws.com/i/l5v89y2o8qi9cozmxyvb.png
series: Browser Compatible Components
---

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](https://css-tricks.com/) 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?


![](https://thepracticaldev.s3.amazonaws.com/i/db3wejhun61zdcx3weaw.png)

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: 

```css
::-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](https://webkit.org/blog/363/styling-scrollbars/) 

> 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](https://drafts.csswg.org/css-scrollbars-1/) through the properties `scrollbar-color` and `scrollbar-width` for eg:

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

Details about that could be found [here](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars)

> 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](https://github.com/Grsmto/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