 So much time and effort is taken to make sites just look absolutely amazing and sometimes there's these little differences that we can do that just go from making the site look amazing to taking at that next step and just bringing the whole brand or the feel and everything together. And one of those things that you can do is adding custom scroll bars. And luckily for us, it's actually really easy to do. You can have a lot of fun with it. So that's what we're going to be looking at in this video. Hello, my friend and friends and welcome back to the channel. I'm so glad that you've come to join me once again. And if you're new here, my name is Kevin and here at my channel, I help you fall in love with CSS and if not fall in love with it, at least hate it a little bit less. As I mentioned at the top today, we're looking at customizing scroll bars and more specifically, we're going to see well, first how we can actually set them up and customize them. We're also going to address vertical scroll bars because there's little differences between the vertical and horizontal ones. We'll also talk about browser support and maybe most importantly, a few things to avoid to make sure that your custom scroll bars not actually ruining the experience instead of enhancing it. I'm looking forward to this one. I hope you are too. So let's go and dive right into the code. All right. So here we are. We're ready to get started. And the very first thing we have to do is a double colon because we're going to be using a suit element, but we also need to web kit. We need to put in the web kit browser prefix because this is something that's off standard. It's not actually something that's implemented in all browsers, which I'm going to address a little bit later. And I'm just going to scroll bar just like that. And this is interesting is this is where you control the entire scroll bar and you can set a width on it. So I'm going to come here and I'm going to do two M. I'm going to make it really big just for demo purposes. We can see what's happening. You'll notice when I first do that, it disappears. I no longer have a scroll bar anywhere. Now it does actually take up some more rooms. So say I did like 10 M and made it huge. You'll see the content is shifting because it knows it needs to make room for that scroll bar. So that's a good thing. If ever you had a giant scroll bar for some reason, but we lose all our styling. So you obviously don't want that. So we're going to come in with two more properties here. And I'm just going to paste this down here as well, because having more of them is good. And we have scroll bar. The next one is going to be track. So the track is the entire scroll bar itself, but it doesn't think we'll sort of the entire thing, I guess. And this is where you can set a background on here. So I'm going to do a background within HSL of 120 degrees. I will go with a 50% and then a 75%. And I'll do over one for now, just in case we want to play with that number. But there we go. We have a green color coming in there. And actually, maybe this should be about 15. And there, that's a little bit nicer. And let's brighten it up a little bit. And this is why I like HSL. You can come in and choose a color and then play with your saturation, more saturation or brightness and play with it a little bit. And yeah, I really like it. So if you want to do more on that, I do have a video that should be a card popping up right now. And let's grab the same thing for the next part, which is going to be our thumb. And what you can do on the thumb now, and the thumb is my thumb, no, it's the part that you see that shows you where you are on the page. So again, we can stick with our green, but let's boost the saturation. And it should pop up there. And then you can see it's there, but we're also going to make it a little bit darker. So I'll come in with a lightness of like 10%, or maybe 20, that probably be kind of dark. And there we go, we can see our thumb on there, and we can scroll up and down. And it shows us our progress on the page. So I think that's pretty cool. And that's sort of the basics of it. And I'm wondering some people might be asking, you could actually come in here and do a thumb hover. So if you needed to, and then maybe here, we actually drop the opacity to a point five or something, I wouldn't necessarily do this, but you can actually see that like, you can notice that, or even let's keep that at one, and maybe this even drops down to like 5% or something. So it gets really dark, maybe that's too much, but whatever you get the idea, you can sort of indicate that somebody is hovering on something or hovering on something hovering on that, if they're clicking and dragging with it. So it's an option that you do have. So I don't know if you necessarily want to do that, but you do have that as an option that's right there. There's other fun things that we can do here. So here we have this is our thumb. So on the thumb, we could put a border radius, border radius. And this is where you can do like 100 VW trick to make a pill shape. And there you go, you get a pill that's scrolling up and down. The problem with the pill shape is it looks kind of ugly at the top here, where you get like the little corners peeking through. We can actually take this and put it on the track itself as well. And then it fits. But now I find you still get that little ugliness. So what we can do to get rid of that is we can come on the track itself and say margin block is a point five M or something like that, just so it pushed a margin on the top and bottom and margin block, if you haven't seen it before, is a logical property. So it's just margin top and bottom because that's like the block sides of things. So you can see it set both of them. And then you just get rid of that sort of really sort of weird corner that can pop up. So that's an option. I'm not saying you need to use it, but I'm just throwing it out there that it is an option that we can use when we want to do that. And if you're wondering about margin left and margin right, let's do a margin inline, which is both my left and my right. And we'll do one M and it's a demo we're exaggerating and you'll notice no, it doesn't work. We can't push it off the side of the page. If we make that bigger, let's just see what happens. It doesn't seem to do anything. And just to show margin right is like 10 M. It's not shifting. And a margin left of 10 M, it's not shifting the content either. So we can do top and bottom, but we can't do a left and right margin on the scroll bar itself. There's other ways you could also play around with this. So because this here is my background color, you could come in with the same one or a different color and you could add borders to them as well. So we do have that as an option. So we could say on the thumb itself, we have a border that is 0.25 M solid and back to our original background color. So then it looks like it's like fitting into that space instead of taking it all up. So that looks kind of neat and kind of cool. I like that. Or we could come in also and actually change like the border color. So maybe this is like a 25 or something. And then you get a different color on the border. So whatever floats your boat on that or whatever design sort of style you need, I sort of like it like this. So for now, I'm going to leave it like that. Now, one more thing here is all of these that I've been looking at so far, they're always targeting the everything, all the scroll bars. But there is another step that you could take along the way here as well, where you could target just specific scroll bars. So one thing I could do is I could actually choose all of these if I wanted to. And I was going to vote to get the wrong shortcuts. It's different in code pen and VS code, but I could just write body on here. And it's not going to change this one, but you can see my body one has actually stayed the same. Or I could do my vertical scroll bar, scroller, I think I called it vertical scroll. I don't remember what I called it vertical scroll. There we go. And now my body one is the default. And here it's changed this one. So you don't you could choose different styling for different areas just to customize it or tweak it or make little changes to where you want. So whatever it might be, you could do that. And when I look at how we can change it for Firefox coming up soon to those same options are going to be there as well. Next, we're going to go down and look at this one down here where you can see that I have a vertical scroll. And you'll notice one thing that's interesting is here I've set a width and the width is obviously made it thicker. But on this vertical scroll bar that I've set up here on this section, we don't actually, you know, it's not thicker. And that's because we set a width, we didn't set a height. And this is a really interesting thing with this. But here, if I go on this and I set a height of two m, it will actually work. And that's going to set the height of this one here. And it's not going to affect this one here. So if you are customizing your scroll bars, the width on your scroll bar selector will only change the width of vertical scrolling. And the height will only affect scroll bars that are horizontally scrolling. So that could be good because you probably, you know, this one could maybe be a little bit bigger and these ones you want to be a little bit smaller or whatever you need. Because obviously the two there looks a bit big, not that the two here doesn't look a little bit big, but you get the idea. You can sort of have them independent of one another, which is kind of neat and kind of nice. And if anyone's asking, you can also set gradients on these just in case. So like here, we'll just do a quick one linear gradient, red to blue, just because it looks decent. And there you go. Oh, we have my hover that's still in there, but you can see that you can come in with gradients on those. And you can also do that on over here, if you want to. So gradients are open and you can have fun with those. If you feel like you want to, you can set all sorts of interesting things on these and style them all up, however you want. Now, one thing that I did mention was browser support. So if I open this up in Firefox, you will notice that none of the scroll bars are actually styled. And that's because Firefox actually supports a much simpler syntax compared to what Chrome supports. And Chrome and Safari both support the one we've set up here with the web kit. And so I'm actually going to put in at supports down here. So at supports. And if you don't know at supports, it will check if a browser supports something. So scroll bar cover, color, cover, color. And in this case, it's actually a property. And I'm just going to write red blue and you'll see why in a second. In a way, I don't need to really put this in an at supports. But the idea would be that it's going to use this and then it will use this if this is supported instead of all that basically. And so then what we can do here is, and this is kind of interesting, but I'm going to put a star because this is a property. It's not a pseudo element. So I'm going to put a star to select everything because what this is doing basically selecting every element like every pseudo web kit from basically it's sort of like if you came in and you said hover is background red, then if you do something like that, anything you hover on is going to change to red when you hover on it. So you can see here it's, you know, when I'm not hovering, it's not ready when I do it does. So that's why here it's working with these pseudo elements here because it's a regular property. I have to select everything. So we select everything. And then we can just say that the scroll bar color is and if I just write red, nothing's actually going to work because you're actually setting the foreground and background color here. So red blue, it looks weird here. But you can see it's actually set it. So red is the thumb blue is the background. So we could come and update that with the colors that we used over here, which is the first one. And then the second value is my track value, which is this one. And put that right there. And then we have our scroll bars that are styled here. Now Firefox does do a few things a little differently. You notice when I hover on top, it's actually changing a little bit. And if I click and drag, it also changes the color. In this case, it's actually kind of vanishing that just really depends on the colors that you've picked and are using them. So don't think that will always be the case. And you do actually have one other option here is scroll bar with scroll, scroll, scroll bar, scroll bar, you got to spell things scroll bar with. And the thing that's weird here is you think like, oh, I can put two m just like I used before, but you can't. This doesn't actually work. You only have three options here, which are auto, which is the default, which is what we have now. There's none which just makes it vanish. There's no more scroll bars. I don't know why you'd want to do that, but you can. And the last one that you can put here is Finn, and Finn will give you Finn scroll bars that you have no control over how thin they actually are. But as you can see, at least it's working. And if ever you want to vertically scroll, just hold shift down, and then you can scroll wheel and it'll go back and forth that way. Just in case you weren't sure. You'll notice though, let's just let's just put this one back to auto for now. But you will notice that this doesn't support border radius is or anything like that. I still get my arrows at the top and the bottom. That's just what it is. But there is one very important thing to remember here is if somebody, you know, this is progressive enhancement. So somebody's on Internet Explorer and they don't have a colored scroll bar and it's not the end of the world. It's a nice touch. It's a nice improvement. You can add consistency like we talked at the beginning, but it's not going to ruin the site. The site still works perfectly fine. And if they're in Firefox and their scroll bar looks like this, it's close enough. It's not bad. They're still getting a similar experience. And then if they go into Chrome and things look a little bit different and a little bit fancier, then they look a little bit different and fancier, but there's still a lot of similarities between all of the different experiences. Now a few little like things I would try and generally avoid if you are setting up custom scroll bars and you're taking these steps. Do make sure there's a high enough contrast ratio between all of the different things here. Because just because you came in and you did a 40% here or something like that, there is a difference. I can sort of see it there. So there is a difference now, but it's not a very big difference. It's almost not noticeable. You're going, ah, it's a cool, just little subtle effect that I'm doing. And is it though? It just means it's really hard to see or you might decide to come in with a really light one. It's like 90 and this is almost white. And then this is coming in at like 85 or something, 85. And then like, again, it's really, really not noticeable there. It's, I guess, a little bit better because our border is standing out. So our border is saving us. But really just try to avoid these like super low contrast ones. You go, oh, you see it when you hover. And that's cool because then it really like comes in, but like, I don't hover. Do you? You probably are on, you know, you're just using your mouse wheel or you're just scrolling. You're not actually going to be looking at it and touching it. So just a few things to take into account there and to avoid in general and just so it doesn't look terrible. So yeah, it's always, it's like anything else. When we're customizing something, you can do what you want with it, but make sure that you're increasing and making it a better experience instead of making it a worse experience along the way. And on that note, if you're looking for other ways that you can sort of step up your game, improve your site, and with not these complicated hard tricks, but really easy things that you can customize that can make your site pop or enhance your brand or bring the branding together or anything like that, I have a very short playlist that you can check out right here. And with that, a really big thank you to Zach, Randy, and Stuart, who are my supporters of awesome over on Patreon, as well as all my other patrons for their monthly support. And of course, until next time, don't forget to make your corner the internet just a little bit more awesome.