Create custom scrollbars using CSS

93316
213
4544
28.09.2021
Kevin Powell

Kevin Powell

37110802
532000
483
20.03.2006
CA
Описание видео:

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!

Кадры из видео
Create custom scrollbars using CSS
Create custom scrollbars using CSS
Create custom scrollbars using CSS
Create custom scrollbars using CSS
Тэги из видео
Комментарии пользователей:
Gayan Hewege online
2022-05-22 15:10:55

Cursor : pointer does not work 😭

Iroshana Ravishan
2022-04-25 19:18:42

Wow.. thanks.. it works perfectly🤩🙌🏁

Kuma
2022-04-14 11:06:54

you saved me! Thanks

Vitor Nelson
2022-03-29 16:47:47

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

caca catastrophe
2022-03-26 00:30:01

This doesn't work in Firefox on Ubuntu 21.10 with GNOME 40. Is this a GNOME-wide or Linux-wide thing?

krishna n
2022-03-21 10:32:09

How to add scroll bar on top

Nour
2022-03-20 23:44:00

When he says 'vertical', he means 'horizontal'

Roger Sterling
2022-03-19 10:54:31

TIL: Margin block & Margin Inline
I have wasted much of my life with left & right etc 😭🥳

Anokh Singh Gill
2022-03-19 02:32:20

Can custom scroll bars works in IOS devices like iPhone and iPad?

Brandon Cox
2022-03-17 06:37:17

I'm just happy opera supports webkit

Jonathan Mayer
2022-03-16 02:12:12

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.

straya_ au_
2022-03-11 06:13:53

how to do you hide it

Sergey Zatsepin
2022-02-22 14:25:38

thx

Civil Thinking
2022-02-20 13:53:25

It's not working in my chrome. It keeps displaying default scrollbar :/ :'(

JD Lowen
2022-02-20 09:39:06

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..

Stone Ville
2022-02-10 14:11:21

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.

Rainer Brunotte
2022-02-08 22:39:57

his name IS kevin :))

Álvaro Díez Martínez
2022-02-05 20:00:59

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)

Enrique Sneffels
2022-02-04 22:44:24

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.

Что ищут прямо сейчас
обич jeeps offroading Armor Guide nuyul shopee food download appvalley kugoo kirin vpro pariz dimash kudaibergen qairan elim soul calibur 2 ivy ryona мандала плодородия CD Recorder owlab Newmods reviewdualbrushpen groove Armada channel good kerbal space program plane slowed reverb AreS_CZE Mi band 4 активация биография ярослава дронова
Похожие видео
16.08.2021
5 simple tips to making responsive layouts the easy way

5 simple tips to making responsive layouts the easy way

24.02.2021
How you can simplify your CSS with :is()

How you can simplify your CSS with :is()

29.04.2021
Create a neon button with a reflection using CSS

Create a neon button with a reflection using CSS

20.08.2021
How To Create Custom Scrollbar In CSS

How To Create Custom Scrollbar In CSS

21.05.2021
Customizable typewriter animation with CSS

Customizable typewriter animation with CSS

28.05.2019
Really fun CSS hover effects

Really fun CSS hover effects

20.07.2020
Custom select menu - CSS only

Custom select menu - CSS only

13.10.2021
Creating a robust grid system using subgrid

Creating a robust grid system using subgrid

29.11.2019
Give your site a fantastic color scheme fast

Give your site a fantastic color scheme fast

02.02.2022
Create a horizontal media scroller with CSS

Create a horizontal media scroller with CSS

17.05.2022
Get started with grid WITHOUT being overwhelmed

Get started with grid WITHOUT being overwhelmed

23.12.2021
3 modern CSS techniques for responsive design

3 modern CSS techniques for responsive design

17.02.2021
I've been challenged to a CSS Battle rematch | Can I beat him again???

I've been challenged to a CSS Battle rematch | Can I beat him again???

10.02.2022
What they got WRONG with CSS

What they got WRONG with CSS

15.04.2022
3 custom property tricks to improve your CSS

3 custom property tricks to improve your CSS

11.12.2020
Responsive design made easy

Responsive design made easy