How To Create Custom Scrollbar In CSS

Scrollbars are one of those things that normally you never change, but when you try to make a dark themed site or if you want to do something unique then they become a huge pain to deal with especially cross browser. In this video I will show you how to really easily how to use CSS to create custom styles for your scrollbar that will work across all browers.

📚 Materials/References:

🌎 Find Me Here:

⏱️ Timestamps:

00:00 - Introduction
00:40 - Standard Properties
03:02 - Webkit Properties

#CSSScrollbar #WDS #CSS

[johnm]

Right on time. I legit needed this now

[pietro]

I watch *a lot* of programming videos. This is one of the best I've seen, period. Also, great guitar selection :)

[theoneandonly]

I was just trying to figure out how to do this! Thank you!

[bilalch]

I was searching for it last day. And today you upload the video 🔥

[ezequielzion]

Nice one Kyle! Thanks for these tutorials

[chhavimanichoubey]

learning something new every day is my daily fix.

[andreiiaz]

Fantastic video! t
Thanks yet again, Kyle!
I just have a question: where in the description is the CSS cheatsheet?

[VidTDM_XD]

you can also use border-raduis on the ::-webkit-scrollbar-thumb to make itr rounded

[zeyarabani]

Hey Kyle, unrelated to this video but can you do some videos on security in the future, like injection, DDOS even XSS, those sorts of attacks are much easier and common for monolithic websites which you don't make on your channel, but I'm curious how they would work with the more modern structure and even more importantly how we would protect ourselves from those attacks.

[junny_toon]

Hello!! I’m Korean coder I love your video ❤️ Thanks!!

[puspamadak]

If we use vw unit for the scrollbar, won't it become dependent on the browser's width? What if the user resizes the browser?

[codelul]

Love the video, been looking for this for a while, but I noticed that you have to hover over both to get the darker color, what if u want to just hover over one of them and get the same result? Will it require JavaScript this way?

[suryak]

Hi bor am from india your doign great videos i like it and am learing more stuff from you, great job keep doing...

[tharshant]

Hi Kyle, Your videos are very helpful to do my project as a beginner. Could you please explain about Firebase-version 9 functions for web... ??

[blakemann]

Thanks Kyle, can you please do a video on running django and node.js servers simultaneously in an app?

[blackpurple]

Watching this after Kevin's video on this topic and I'm glad I've watched both learning something new in each video about fancy scrollbars, anyway can we animate and use images in place of thumb and/or track?

[snjvthakur]

Thanks sir, waiting for one video from your side scroll to top from bottom of webpage by clicking icon.

[yahyasalimi]

Thank you very much for this amazing content. How do I make my div element scroll-able vertically? and also apply these styles using webkit?

[mr.wazirgaming]

Is this triac work on that section on which we decler
Overflow: scroll;

[ThaRealIansanity]

Thanks for great info. I thought it wasn't working in FF but I had a comma between the 2 colors. Should be no comma.