Create custom scrollbars using CSS

Key Takeaways

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 hope 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 bar is 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 pseudo element but we also need to um web kit we need to put in the webkit 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 write 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 2m i'm going to make it really big just for demo purposes so we can see what's happening but 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 room 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 gonna be track so the track is the entire scroll bar itself but it doesn't well 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 with an hsl of 120 degrees i'll go with a 50 and then a 75 and i'll do over one for now just uh in case we want to play with that number but there we go we have a green uh color coming in there and actually maybe this should be about 15 and there that's a little bit nicer um 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 know more on that i do have a video there 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 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'd 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 0.5 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 five percent 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 um 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 ah 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 0.5 m or something like that just so it'll push 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 uh 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 and 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 again 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 uh it doesn't seem to do anything so and just to show margin right is like 10 m it's not it's not shifting uh and a margin left of 10 m it's it's not shifting the content either so we can do top and bottom but we can't do a left and right margin uh on the scroll bar itself and 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 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 um 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 about to get the wrong shortcut because it's different in codepen 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 uh 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 can choose different styling for different areas just to customize it or tweak it or make little changes uh 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 too 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 has 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 2m 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 you 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 uh chrome and safari both support the one we've set up here with the webkit 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 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 is selecting every element like every pseudo webkit thumb 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 red and when i do it does so that's why here it's working with these pseudo elements um 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 though so don't think that will always be the case um and you do actually have one other option here is scroll bar width scroll scroll scroll bar scroll bar you gotta spell things scroll bar riff and the thing that's weird here is you think like oh i can put 2m just like i used before but you can't um 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 thin and thin will give you thin 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 uh just in case you weren't sure uh you'll notice though let's just let's just put this one back to auto for now uh but you will notice that this doesn't support border radiuses 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 uh do make sure there's a con like a high enough contrast ratio between all of the different things here um because just because like say you came in and like you did a 40 here or something like that uh there is a difference i can i can sort of see it there so there is a difference now but it's not a very big difference like it's almost not noticeable you're going oh it's a cool it's this little subtle effect that i'm doing and like is it though um it just means it's really hard to see or you might decide to come in with like a really light one it's like 90 and this is like almost white and then this is coming in at like 85 or something uh 85 and then like again it's really really not noticeable well there it's i guess a little bit better because our border is standing out so our border is saving us uh 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 you know you're just you're 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 um and 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 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 stewart 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 corn on the internet just a little bit more awesome