Custom Scrollbar Design
Tags: webdev, css, showdev, gatsby
Published: 2020-02-21 12:33:18

---
title: Custom Scrollbar Design
cover_image: https://www.waylonwalker.com/custom-scrollbar-wtih-gatsbyjs.jpg
published: true
tags: webdev, css, showdev, gatsby
canonical_url: https://waylonwalker.com/blog/custom-scrollbar-design/
series: waylonwalker-redesign-2020
---

Inspired by Wes Bos's new [uses.tech](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](uses.tech) is open source I jumped on github, searched for scroll and found this [layout.js](https://github.com/wesbos/awesome-uses/blob/124bdd64345bc64eb84879929f0e57cbb8752e34/src/components/layout.js#L74).

## 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.

![](https://waylonwalker.com/why-wont-you-work.jpg)

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.

``` css
 /* 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);
  }

```

``` javascript
// 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](https://waylonwalker.com/custom-scrollbar-with-css.gif "my final result, an example give of the final result live on waylonwalker.com")

> My final result

## Resources

uses.tech layout.js: [layout.js](https://github.com/wesbos/awesome-uses/blob/124bdd64345bc64eb84879929f0e57cbb8752e34/src/components/layout.js#L74)

css-trick article: [scrollbar](https://css-tricks.com/almanac/properties/s/scrollbar/ "css tricks scrollbar article")

## 📢 Newsletter

I have started a [newsletter](http://waylonwalker.com/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.