Up next in 10
How To Create Custom Scrollbar In CSS
2K views
Feb 7, 2024
Elevate the aesthetics of your web design with this tutorial on "How to Create a Custom Scrollbar in CSS." In this video, you'll discover the art of customization as you learn to style and personalize scrollbars to match the visual identity of your website. From implementing CSS styles to enhance the appearance of scrollbars to adding unique colors, gradients, or even animations, this tutorial caters to developers looking to add a touch of creativity to their web projects. Whether you're a CSS enthusiast seeking to refine your styling skills or a designer wanting to tailor the user interface, this guide offers a step-by-step walkthrough. Join this tutorial to unlock the potential of CSS customization and bring a unique, polished look to your websites by creating custom scrollbars that seamlessly blend with your design vision.
View Video Transcript
0:00
Custom scroll bars used to be a huge pain, but now with modern CSS, you can create amazing
0:04
custom scroll bars that look like this that work in every single major browser
0:09
Let me show you how. Welcome back to WebDev Simplified. My name is Kyle, and my job is to simplify the web for you so you can start building
0:19
your dream project sooner. And to help you with that, I'm going to be showing you how to create custom scroll bars
0:23
that work in every single browser. And there's two ways to create custom scroll bars
0:27
One way is only going to work in Firefox, and the other way is going to work in pretty
0:31
much every other major browser out there. So I have Google Chrome open on the top to show you how Chrome will work
0:36
And on the bottom, I have Firefox open to show you how Firefox will work. First I'm going to start with the Firefox version because it's the standard that will
0:42
be implemented in all browsers eventually. And it's super, super straightforward and easy to do
0:47
So let's select our HTML element, because right now that's where our scrollable content is
0:52
And that's just because we have a bunch of content inside of our body here. So to do this, we have some properties called scrollbar- and we're going to have width
0:59
which changes the width of our scrollbar, and we have color, which changes the color of our scrollbar
1:03
So width is going to be pretty easy because we technically only really have three values
1:07
we can use. We have the default value, which is just going to be the normal scrollbar you see here
1:12
We're going to have the value thin. This is going to give us a thin scrollbar. And you're going to notice something interesting
1:17
By doing this on Firefox, the actual arrows for up and down actually get removed
1:21
And depending on the browser or device that you're operating on, this thin scrollbar may
1:25
be different, and maybe the default scrollbar is already the thin scrollbar
1:29
So really all this allows you to do is to create a thinner scrollbar on the device if there is one that's available, such as in Firefox
1:35
Finally, the last option is none, and it just completely removes the scrollbar, but we can
1:39
still scroll. This is generally something I don't advise doing unless you already have another system
1:44
like a custom scrollbar that you're implementing as well, because otherwise this makes your site much more difficult to use
1:50
So with that out of the way, let's just put this back to normal, essentially. We don't really want to mess with this
1:54
So the next thing I want to do is change the scrollbar color. And scrollbar color takes two separate colors
2:00
The first color is going to be the thing that you actually drag, this little thumb handle, and the second color is going to be the background color
2:06
So if we do red and green, you can see when I save that the background is this green color
2:10
and the actual thing that we hover over and drag is going to be red. So we can drastically change the look of our scrollbar, which is great if you have a dark
2:16
site, for example. So if our body here has a background color, which is going to be something like 333, and
2:24
we have a color here, which is going to be like CCC, that's going to give us a dark site
2:29
as opposed to a light site. And as you can see, the normal default scrollbar really sticks out
2:34
So you could change your actual scrollbar to be a much more darker color
2:38
Let's just see if we can find something that works with 777, and we'll do here something
2:42
like 555. Now you can see we have a dark scrollbar on the side, which just matches our site much
2:48
better and makes it much more of a cohesive experience as opposed to this jarring scrollbar
2:52
up here that we have on Chrome. Now, those are the only two properties you can use to change the scrollbar in Firefox
2:57
so it's pretty limited, but it's really enough to do everything that I would want to do with
3:00
a scrollbar. The next properties I'm going to talk about only apply to Chrome and other Chrome-like
3:04
browsers and even other browsers beyond Chrome, such as Safari, that have implemented them already
3:09
And these are all prefixed with the WebKit extension. So the way we want to do this is we would type in HTML, and then we need to use a pseudo-selector
3:16
and this pseudo-selector allows us to select all the different elements of the scrollbar. So if we say dash WebKit dash and then just type in scrollbar, this allows us to essentially
3:24
select the entirety of the scrollbar element. And here we can modify things such as the width and height and so on
3:30
So let's come in here, we'll just say the width is going to be 10 pixels, for example, and we save, and you're going to notice something interesting
3:35
The scrollbar actually disappears. Pretty much any time that you modify the scrollbar, it's going to remove the default scrollbar
3:43
and you're going to have to implement the new scrollbar yourself. So we need a few other properties. The next one is going to be another pseudo-selector, and this is going to be for the thumb, the
3:49
thing that we drag. So we're going to say WebKit scrollbar thumb, and this is the thing, like I mentioned, that
3:55
we drag along. So let's just come in here, we can set a background color
4:00
Let's just do red for now. And then we're also going to copy this and we're going to do the track
4:04
So we're going to change thumb to track, and let's change that to green
4:09
Now if we save, you can notice that we have a scrollbar that is 10 pixels wide and it has the red thing that we can drag and the green as the background
4:16
But something interesting is you notice as I zoom in and out of my page that the actual width of my scrollbar changes, and that's because we're using a pixel element here
4:23
so it's going to change as I zoom in and out my web page. I don't actually want that to happen, so instead when I'm defining a scrollbar, I almost always
4:30
use view width units, and this will mean that it won't actually scale when I zoom my site
4:34
So by doing 2vw, you can see that as I zoom in and out of my website, the width of my
4:38
scrollbar actually doesn't change. We can make this a little wider if we want, so it's easier to see what's going on
4:43
You can see that the width doesn't change, which is really what you want, because when you zoom your website, your scrollbar shouldn't change size
4:49
So I recommend always going with these vw units if possible. If you're confused on what vw units are, check out my video in the cards and description
4:56
It covers all the different CSS units you need to know. Now a kind of nice thing about being able to customize your scrollbar using these pseudo
5:03
elements is that you can actually do a lot with them. So let's come in here and we're just going to change our colors to match the colors of
5:08
the dark thing that we have down here on Firefox. So we have a pretty similar looking scrollbar
5:12
And what I want to do is I want to make the scrollbar kind of not show up very brightly
5:16
unless we hover over it, and then I want it to show up much more brightly
5:19
So in our case, we can change this background color here to something that is partially transparent
5:24
So we're just going to come in here with like a 5, for example, at the end, and that's going to make it partially transparent
5:28
We do the same thing down here, make it partially transparent. But when I hover it, I want to make it not transparent anymore
5:34
So I can just copy this selector, come in here and just put the hover pseudo selector
5:38
on it. So whenever I hover over the thumb, we're going to remove that transparency at the end
5:43
So if I hover over that thumb, you can see that it brightens up because it's no longer
5:46
being transparent anymore. Same thing down here. Let's copy the track and we're going to put a hover on it
5:52
And we're just going to remove that alpha channel from our color. Click Save
5:56
And now we hover over the track. You can see it brightens up and we hover over the thumb. It brightens up
6:00
So as you can see, this is really good if you want your scrollbar to be kind of hidden until you actually go over to it where it's going to brighten up and look much more appealing
6:06
to the user so they can interact with it. Otherwise, it's just going to kind of fade into the background and not really get in
6:10
their way. Now, if you enjoyed this video, you're going to love my free CSS selector cheat sheet
6:15
It covers everything from the basic selectors all the way to more advanced pseudo selectors
6:19
and pseudo elements that are perfect for making your CSS exactly like you want
6:23
So I highly recommend you check that out. Link down in the description below. With that said, thank you very much for watching and have a good day