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.
Top comments (2)
An actual standard for this is in development. The MDN overview is here.
Thanks for the link, that probably would have helped me along the way!