Create custom scrollbars using CSS

Having a custom scrollbar can help tie a site's branding together on the page, as well as help it match an app, and it's really easy to do!

You can do more than I can here, including styling the up and down arrow buttons, top and bottom blank spaces, and much more! https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar

Connections
The code for this video: https://codepen.io/kevinpowell/pen/gORdmMZ
More info on HSL: https://www.youtube.com/watch?vAb9pHqhsfcc&listPL4-IK0AVhVjMylAEgsiMvj3rt4Eb_lI1k&index12&t1s
More information on logical properties: https://www.youtube.com/watch?vkzvmaVik4mA&listPL4-IK0AVhVjN6Utu26iRBgKjjfkAzA3HS&index2

Timestamps
00:00 – Presentation
01:03 – The Basics of Custom Scrollbars
03:18 – Hover effects on your scrollbar
03:58 – Change the shape and make it a little prettier
06:01 – Targeting specific scrollbars
06:58 – Vertical scrollbars
08:23 – Browser support
12:07 – Things to avoid!

#css

—

Come meet other developers in my Discord community
https://discord.gg/nTYCvrK

Keep up to date with everything I'm doing
https://www.kevinpowell.co/newsletter

Come join me live every Monday on Twitch!
https://www.twitch.tv/kevinpowellcss

—

Help support my channel
‍ Get a course: https://www.kevinpowell.co/courses
Buy a shirt: https://teespring.com/stores/making-the-internet-awesome
Support me on Patreon: https://www.patreon.com/kevinpowell

—

My editor: VS Code – https://code.visualstudio.com/

—

I'm also on other places on the Internet!

If you want a behind-the-scenes look and a sneak peek at what's happening on my YouTube channel, be sure to follow me on Instagram and Twitter.

Twitter: https://twitter.com/KevinJPowell
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell

—

And whatever you do, don't forget to keep making your corner of the internet even more awesome!

Please take the opportunity to connect and share this video with your friends and family if you find it useful.