Create custom scrollbars using CSS

From the creator

Having a custom scrollbar can help tie the branding of a site together on the page, as well as help it match an app as well, and it's really easy to do! You can do more than I did here, including styling the up and down arrow buttons, the empty spaces on the top and bottom, and more! https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar 🔗 Links ✅ The Code from this video: https://codepen.io/kevinpowell/pen/gORdmMZ ✅ More info on HSL: https://www.youtube.com/watch?v=Ab9pHqhsfcc&list=PL4-IK0AVhVjMylAEgsiMvj3rt4Eb_lI1k&index=12&t=1s ✅ More info on logical properties: https://www.youtube.com/watch?v=kzvmaVik4mA&list=PL4-IK0AVhVjN6Utu26iRBgKjjfkAzA3HS&index=2 ⌚ Timestamps 00:00 - Introduction 01:03 - The basics of custom scrollbars 03:18 - Hover effects on your scrollbar 03:58 - Changing the shape and making it look a bit nicer 06:01 - Targetting specific scrollbars 06:58 - Vertical scrollbars 08:23 - Browser support 12:07 - Things to avoid! #css -- Come hang out with other dev's in my Discord Community 💬 https://discord.gg/nTYCvrK Keep up to date with everything I'm up to ✉ https://www.kevinpowell.co/newsletter Come hang out with 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.visua

Published 2021-09-28 · Watch on YouTube ↗
Availability and playback restrictions are controlled by the original channel.