Custom Scrollbar Design

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

📢 Newsletter

I have started a newsletter! Sign up for no more than weekly emails. I am currently deciding what to do with it, so sign up and tell me what you want to hear about. It will likely be about ways to find value in data, whether its building pipelines or visualizing.