Custom Scrollbar Design

Getting a custom scrollbar on your site makes it stand out a bit compared to the very plain stock one that are on most sites. This is how I set mine up on my gatsby site.

Inspired by Wes Bos's new uses.tech I wanted a custom scrollbar on my personal site. I had tried to do it in the past, but gave up after it was not working.

Looking at the Source

Since uses.tech is open source I jumped on github, searched for scroll and found this layout.js.

Copy it to my own component

My first step was to take his css and copy it into a styled component for my entire layout, but it failed. I do not fully understand why. None of the custom style came through at all. If you know please leave me a comment.

I suspect for some reason it has to do with attatching to the html element inside of a styled-component. I think wes was able to get around this by using createGlobalStyle. But I was still using much of the default gatsby template, so I did not have a createGlobalStyle element, but I did have a layout.css.

scroll.css

I added scroll.css to my static directory, then imported it into gatsby-browser.js in order to get it loaded onto the page.

        
 /* static/scroll.css */

body::-webkit-scrollbar {
    width: 1rem;
  }

  html {
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: #5651B7;
  }

  body::-webkit-scrollbar-track {
    background: #392E3D;
  }

  body::-webkit-scrollbar-thumb {
    background-color: #5651B7 ;
    border-radius: .5rem;
    background: rgb(112,107,208);
    background: linear-gradient(180deg, rgba(112,107,208,1) 0%, rgba(86,81,183,1) 100%);
    border: 1px solid rgba(86,81,183,.5);
  }

        
// gatsby-browser.js
import './static/scroll.css

It works

It was a bit finicky for me to find the right place to put everything, but this is the final result. I found out that you can have a gradient on your scrollbar-thumb, but the scrollbar-track cannot, it also cannot be transparent. I picked a color that matched my background the best for most use cases, but when the screen gets really narrow a line starts to appear.

My final result

Resources

uses.tech layout.js: layout.js

css-trick article: scrollbar