Одну секунду
Что-то сучилось. Попробуйте еще раз.
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! 🤍developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar 🔗 Links ✅ The Code from this video: 🤍codepen.io/kevinpowell/pen/gORdmMZ ✅ More info on HSL: 🤍🤍youtube.com/watch?v=Ab9pHqhsfcc&list=PL4-IK0AVhVjMylAEgsiMvj3rt4Eb_lI1k&index=12&t=1s ✅ More info on logical properties: 🤍🤍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 💬 🤍discord.gg/nTYCvrK Keep up to date with everything I'm up to ✉ 🤍🤍kevinpowell.co/newsletter Come hang out with me live every Monday on Twitch! 📺 🤍🤍twitch.tv/kevinpowellcss - Help support my channel 👨🎓 Get a course: 🤍🤍kevinpowell.co/courses 👕 Buy a shirt: 🤍teespring.com/stores/making-the-internet-awesome 💖 Support me on Patreon: 🤍🤍patreon.com/kevinpowell - My editor: VS Code - 🤍code.visualstudio.com/ - I'm on some other places on the internet too! If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter. Twitter: 🤍twitter.com/KevinJPowell Codepen: 🤍codepen.io/kevinpowell/ Github: 🤍github.com/kevin-powell - And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
Cursor : pointer does not work 😭
Wow.. thanks.. it works perfectly🤩🙌🏁
you saved me! Thanks
Hi Kevin. I have a question about the vertical scrolling. The vertical scrolling inside the document, why is called vertical? Because to me, it looks like horizontal. Thanks
This doesn't work in Firefox on Ubuntu 21.10 with GNOME 40. Is this a GNOME-wide or Linux-wide thing?
How to add scroll bar on top
When he says 'vertical', he means 'horizontal'
TIL: Margin block & Margin Inline
I have wasted much of my life with left & right etc 😭🥳
Can custom scroll bars works in IOS devices like iPhone and iPad?
I'm just happy opera supports webkit
lvKK2fs6h4I&t=5m19s 5:19 right there, if you freeze you can see it. You CAN do a margin-inline on the scrollbar-track. It just only affects the horizontal scrollbars and not the vertical ones.
how to do you hide it
thx
It's not working in my chrome. It keeps displaying default scrollbar :/ :'(
CSS has evolved so much... what is your recommendation to learn the essential basics and the latest useful tricks. PS: of all the YouTubers, I find you the most useful. Big thanks and keep it the great content. The fact that your screenshot show the final product and you describe what will be accomplish is what attracts me the most to your videos..
Helpful video as ever. I have an issue with custom scrollbars that I can't find an answer to. I often use on horizontal media scroller (you've done a video on that which is great). The problem I find though is that media scrollers will always have an overflow. But, without custom CSS for the scrollbar in an overflow:auto area, a scrollbars will only be visible when you hover on the area (on Mac and mobile devices). However when you implement custom CSS this changes and the scrollbar is ALWAYS visible. I find this ugly and non desirable, my clients and designers don't like it and tell me to get rid of it. I say that I can't because I haven't found a way! It looks bad especially when you consider often these media scrollers have padding on the left to align the first slide. Now, I would be happy with the default behaviour and would not want to use custom scrollbar CSS like you've demonstrated here, however the MAIN reason I customise the scrollbar is to get rid of the ugly Windows blocky scrollbars that you get in Chrome and Edge. Is there anything I can do, that would target the browsers that have an awful looking scrollbar? I can't think of anything atm.
his name IS kevin :))
In my personal experience, I think it's ridiculous that we can't customize the scrollbar any easier than using the browser prefix. I mean, why can't some styles be applied to this HTML element? So the solution for most cases is to use external libraries to customize these elements and not all of them work as expected, that's my experience. thanks for this video, great content, and very interesting topics! (P.S. sorry if my English is not good enough :P)
Hello, Kevin! How can we make the 'thumb' a little bit smaller? I have been looking, but I haven't found anything and he MDN documentation is awful on this topic, they don't even provide examples to most of the options they listed. I wanted to make one rounded instead of a 'pill' shaped one. And I was wondering if I could add maybe a triangle or an icon instead of the default shape.
.svg){kind=small}
