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

Date: February 21, 2020

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 <https://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 <https://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.

Image: <https://images.waylonwalker.com/why-wont-you-work.jpg>

I suspect for some reason it has to do with attatching to the html </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.

[code]
   /* 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);
    }

[code]
  // 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.

Image: My final result <https://images.waylonwalker.com/custom-scrollbar-with-css.gif>

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/>