Create A Custom Scroll Bar

We are all used to seeing a scroll bar on all the pages we visit daily on the internet.

They are useful and explicit. This is very handy but not enjoyable. For a while now all major Browsers accept some CSS Pseudo elements to customise to wat the browser's scroller looks. To have some more information you can check it out on Can I Use.

As I have a few bits of code that will scroll on the X axis, and the home page that scrolls on the Y axis I wanted to make this a little more, appropriate, with the rest of the website. To get this done I have added some CSS to my theme.

If you have seen my previous article about adding TypeScript and SCSS to Grav you will just have to import another script in your main SCSS. Anywhere else you will need to add the following CSS :

/* components/sidebar.scss */

@use '../variables' as *;

/* width */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

/* Track */
::-webkit-scrollbar-track {
  background: $bg-color;
  outline: $primary-color-dark solid 4px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: $primary-color;
  outline: $primary-color-dark;
  border-radius: 50vh;
  transition: 1s ease-in-out;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: $primary-color-dark;
  border: 1px solid $primary-color;
}

When writing this post, firefox does not support these CSS pseudo elements. It does, however, support a property since version 64 that will get us close to what we have on the other browsers. I added this at the end of my previous file :

/* Firefox properties */

* {
  scrollbar-color: $primary-color $bg-color;
}

The colors are now correct but unfortunately we can not change the border radius for now.

In my case this file is inside my components directory and called sidebar.scss it imports a SCSS file containing variables from its parent directory :

$bg-color: #f1f1f1;
$bg-color-dark: darken($bg-color, 15%);

$primary-color: #ff6a1e;
$primary-color-dark: darken($primary-color, 15%);

This will then be included in my main SCSS file to make sure it will be added to my main HTML template thanks to the WebPack Encore build.

@use 'components/scrollbar';

Thanks to this my scrollbars will now be a lot closer to the style of my website :

Before

before

After

after

Life with 🐘 🐳 🐧 💻