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
We can't force this scrollbar to stay visible on mobile (ios or firefox on android) without using custom JS scrollbar right? I mean we can somehow trick that website is going 1px down and up all the time but it can cause problems. What do you think?
While working on my portfolio project around 1 AM, I stumbled upon this video on how to beautify my scrollbar, and it's amazing! I'm really happy that you paid attention to these kinds of details. It was truly helpful and came just in time for me.
@Ahmad Bilal Yes, demonstrating the different possibilities is what hooked me to Kevin's videos. There's always something new I haven't thought of or knew about.
You can use a transparent border in combination with "background-clip: content-box;" to move the scrollbar away from the side. In combination with "overflow: overlay;" on your html element this looks great, even if your page background isn't a static color!
5:55 you can also have transparent border for thumb combined with background-clip: padding-box so you don't have to care about track color, if you just want to have "padding" for thumb
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.
6:00 neat trick for transparent thumb border, needed if the track's background is a gradient or image: border: .25em solid transparent; background-clip: padding-box;
@@keithf5236 Kevin has defined a class of vertical-scroll for specific divs/blocks of content that will be scrollable but the overflow attribute means that the one shown is actually only presenting a horizontally scrollable area. Hence the confusion.
10:58 sometimes you want a block or even whole page scrolled but without the feeling of page being scrolled. That's where hiding (not disabling) scrollbars comes in handy. Thanks for another great video! I've just been looking for a scrollbar customization in new themes, but couldn't find good enough cross-browser way.
CSS has evolved so much... what is your recommendation to learn the essential basics and the latest useful tricks. PS: of all the UA-camrs, 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..
Fun fact: in addition to :hover, you can also use :active on the thumb to style it differently (make it even darker) when the user's mouse button is pressed
Thankyou for revisiting this topic but with MORE, I decided to style the chrome scrollbar to look like the firefox scrollbar which looks heaps better in my arrogant opinion. ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-button { height: 0; } ::-webkit-scrollbar-thumb { border-radius: 100vw; border: 3px solid; }
hey Kevin I love you. You dont know how good you are.Superb teacher. So much skill in css.Truely CSS king.Learned a lot from your videos and keep learning.
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.
You can hide your scrollbar on Chrome by enabling the scroll-overlay flag. The scrollbar doesn't go away permanently, it just hides, If you place your mouse on the right edge of the screen it reappears. Also, the new scrollbar that the flag displays is thin and more stylish than the default one. Without the scrollbar websites look much better.
I remember that this was once possible in IE too. It's a nice to know. But my experience is that in most cases it isn't a good idea to change the browser UI. It disturbes the site visitors more than it improves the usability.
I just wrote the same thing before I read this, so there must be many who remembers the scroll bar hell which came with other fun stuff like scrolling text, auto starting music. comic sans, ani gifs and "Best viewed in 680*400 with IE". History repeats itself unless we know the history and learn from it
Yeah, I think this is more applicable for web apps than websites. I can see that at work making a custom scrollbar would make our inner charts that scroll a lot nicer, but I dont think I would do it on a ecommerce site for example.
Was about to type “ha, first time ahead of you” when you started to show the Firefox hack 🤪. A pity Firefox doesn’t allow the full monty (one of my favorit browsers) but then you could use width = none and fake the scrollbar with a home made one (div in div and some javascript). Some might say that’s overkill, but to me unstyled scroll bars always visually pop out (mainly an issue since I am mostly a desktop XAML developer where you can style everything to fit perfectly together)
Thank-you Kevin - great video as always!!👍🏻Could you also do a video on changing the header colours on mobile browers please? I've currently got this implemented on one of my sites, but not sure if there is any extra values I'm missing?!🤔
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
save: to playlist -> is not functioning on this video so unable to add to playlist.. fyi.. I presume integrating this into the style(index).css file? How do we make it so we can click on the page(not scrollbar) & move it up like a mac instead of scroll wheel? great stuff you are teaching & sharing... something we should all do with the knowledge that was shared with us by others... Concise & Articulated. Very easy to follow along & understand!
I never went this far in customizing them hehe. I have one that has no height on mobile where the desktop has a custom button controled scroll, too bad Firefox doesn't support exact sized bars. It does work with my hsl theme slider 😁😁😁
Hi Kevin really nice video , covered most of them, I really wanted to know if we can change the color of the scroll bar on scrolling (not clicking and dragging just scrolling in the body of the page)
I was going to ask how to style the intersection of the vertical and horizontal bars but the mozilla documentation covers that =>::webkit-scrollbar-corner. 👍
Chrome now supports the `scroll-*` properties, though these cannot change things like border radius, but I actually think it's better because in my opinion, custom scrollbars sometimes bring a bad accessibility and changing the color is enough in most case.
@kevinPowell I really like your soltion. It looks very good on desktop. Do you have any solution for mobile Chrome or Safari? I tested on iPhone Mobile Safari and Chrome, but wasn't able to implement those fancy scroll bars. Maybe that is idea for next video 😃
Merci beaucoup pour cette vidéo très claire 🤩 je suis en train de faire mon portfolio et je voulais simplement un meilleur design et grâce à vous c'est parfait ! +1
Hey man nice vid! Do you have a video on how to make a page to page scrolling option, not like an actual scrollbar. Let’s say for example that I’m at my index and it is based on big pictures that cover all the screen. I wouldn’t like a normal scrollbar that leaves me halfway between 2 pictures. I want to be able to scroll down from one menu to another. Thanks a lot 👌🏼
Can you somehow make the thumb flat at the top to avoid that 4:11 ugliness. Like if you scroll it down it becomes round, and flat when it touches the top, that sort of animation. Not sure if this requires JS but really appreciate if you show it in a shorts video or an actual tutorial...
Hi Kevin - quick question about this - is there anyway to capture the drag using CSS (i.e. when dragging the thumb -slider)? I was looking to have a grab effect running, so open hand while over the top of the thumb-slider, and closed while dragging? Thanks in advance, if you see my post. I did look down the pseudos and what-have-you, but couldn't see anything obvious.
i use thin scrollbar on small stuff, for example a card for previewing a post but tags doesnt fit on a single line so you can just scroll it to left or right, because the card has to be a specific aspect ratio. if i dont make it thin, it looks really ugly on pc
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.
Just wondering if the reason the margin-inline didn't work on the scrollbar-track is because it can't expand past the 2em you've set on the scrollbar element? So you'd increase the scrollbar element or add margin to it instead.
Some IDEs support a multi-caret typing system. If what he's using is anything like VSCode, you can create multiple carets using CTRL+ALT+up (or down), or what he's done can be replicated in VSCode by holding ALT and clicking a character in a script.
Hi Kevin, I really hope you read this comment x) I just have a question, is there a way to make the scrollbar thumb width increases on hover? I just couldn't make it, since the scrollbar already have its own width.
How can a scrollbar width transition be used? I know that it is possible to use a transition for color using inherit, but this cannot be repeated with width.
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
Me: Opens Mozilla link in Firefox...
Also me: Remembers ::webkit-*....
Thank you for this. By now i never got it running on ff.
We can't force this scrollbar to stay visible on mobile (ios or firefox on android) without using custom JS scrollbar right? I mean we can somehow trick that website is going 1px down and up all the time but it can cause problems. What do you think?
Hi, @Kevin Powell. How do we get the hsl to have transparency?
This really raises the bar for scrolling
ua-cam.com/video/oShTJ90fC34/v-deo.html
Well that's enough dad jokes for this morning 😆
Ahhh humor 💀
1998: Microsoft: Style your own scoll bars!
2001: N&N Usability test: Custom scroll bars are bad for usability
2021: W3C: Style your own scroll bars!
Thank you for your contribution to humanity
While working on my portfolio project around 1 AM, I stumbled upon this video on how to beautify my scrollbar, and it's amazing! I'm really happy that you paid attention to these kinds of details. It was truly helpful and came just in time for me.
SAME BRO LOL its 12:30 PM/0:30AM rn
I love how you actually demonstrate multiple options instead of just a plain tutorial.
@Ahmad Bilal Yes, demonstrating the different possibilities is what hooked me to Kevin's videos. There's always something new I haven't thought of or knew about.
@@Gregorius421 yep and it is a pretty unique style. I don't find many people doing this. I get to learn so much due to this. 🙌
I love Kevin's professionalism and premium style tutorials.
Thanks Akash!
Nice Last Name!!! ;)
You can use a transparent border in combination with "background-clip: content-box;" to move the scrollbar away from the side. In combination with "overflow: overlay;" on your html element this looks great, even if your page background isn't a static color!
Any chance you have a codepen example?
5:55 you can also have transparent border for thumb combined with background-clip: padding-box
so you don't have to care about track color, if you just want to have "padding" for thumb
+ having :hover style, that removes border, so thumb grows when you hover over it
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.
great catch!
I'm a simple man. I see a new video by Kevin, I watch and upvote.
CSS never ceases to amaze me
6:00 neat trick for transparent thumb border, needed if the track's background is a gradient or image:
border: .25em solid transparent;
background-clip: padding-box;
6:36 "vertical-scroll" - affects the bit that scrolls horizontally 🤣 Pretty sure that is right out of my playbook of goofs!
I thought I had misheard it, but yeah people do make mistakes
so is the horizontal scroll actually referred to as vertical bc when you put vertical-scroll, it only affected the horizontal?
@@keithf5236 Kevin has defined a class of vertical-scroll for specific divs/blocks of content that will be scrollable but the overflow attribute means that the one shown is actually only presenting a horizontally scrollable area. Hence the confusion.
So easy to understand and so professional,you made my website look good
Every front end developer should watch this video
10:58 sometimes you want a block or even whole page scrolled but without the feeling of page being scrolled. That's where hiding (not disabling) scrollbars comes in handy. Thanks for another great video! I've just been looking for a scrollbar customization in new themes, but couldn't find good enough cross-browser way.
Yeah, good point I should have thought of that :)
CSS has evolved so much... what is your recommendation to learn the essential basics and the latest useful tricks. PS: of all the UA-camrs, 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..
Fun fact: in addition to :hover, you can also use :active on the thumb to style it differently (make it even darker) when the user's mouse button is pressed
Thankyou for revisiting this topic but with MORE, I decided to style the chrome scrollbar to look like the firefox scrollbar which looks heaps better in my arrogant opinion. ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-button { height: 0; } ::-webkit-scrollbar-thumb { border-radius: 100vw; border: 3px solid; }
Great video (as always)! The Firefox part is exactly what I needed today 🙏
hey Kevin I love you. You dont know how good you are.Superb teacher. So much skill in css.Truely CSS king.Learned a lot from your videos and keep learning.
Hi man, you saved me from a mess I was in for hours, thank you
Nice video, thanks!
What got me confused a bit: Your 'vertical' scroll is actually a horizontal one. 😕
🤦♂️
@@KevinPowell still not got used to this? :)
I was looking for a video for scrollbar, And suddenly a notification popped with your video.
Thank you ^_^
Really ? I've heard that so many times, soooo unlikely...
@@nextentrepreneur9288 Yes really, For SURE!!!
I thought I was crazy for doing this on all my sites, but now I am validated 😀
Timely input by the algorithm, was struggling with this yesterday.
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.
There is another one useful property ::-webkit-scrollbar-button. It could be pretty helpful to hide controls.
This is a fantastic tutorial, thank you for making this!! Helped me so much!
Such a great, straightforward video
Danke!
Thanks so much, Kevin! (and great name 😉)
Ehrenmann 👍
@@Ddalu5 Danke :)
Thank you so much! I really enjoy watching your videos to learn something new :D
You can hide your scrollbar on Chrome by enabling the scroll-overlay flag. The scrollbar doesn't go away permanently, it just hides, If you place your mouse on the right edge of the screen it reappears. Also, the new scrollbar that the flag displays is thin and more stylish than the default one. Without the scrollbar websites look much better.
Awesome video man! You make it so easy to understand
Tried this out and worked great! I noticed my scroll bars in Firefox had rounded corners though too, so it must’ve worked!
I learn so much with kevin powell, thanks
Amazing stuff as always, thanks a bunch for this, I learnt a lot!
Very informative video. I was looking for customising scroll bar and stumbled upon this video 😁
I remember that this was once possible in IE too. It's a nice to know. But my experience is that in most cases it isn't a good idea to change the browser UI. It disturbes the site visitors more than it improves the usability.
I just wrote the same thing before I read this, so there must be many who remembers the scroll bar hell which came with other fun stuff like scrolling text, auto starting music. comic sans, ani gifs and "Best viewed in 680*400 with IE". History repeats itself unless we know the history and learn from it
Yeah, I think this is more applicable for web apps than websites. I can see that at work making a custom scrollbar would make our inner charts that scroll a lot nicer, but I dont think I would do it on a ecommerce site for example.
I use this for horizontal scrollers. But for the vertical scrollbar people are so used to the default one that it would be disturbing to change it.
Super insightful video. Thanks Kevin.
Was about to type “ha, first time ahead of you” when you started to show the Firefox hack 🤪.
A pity Firefox doesn’t allow the full monty (one of my favorit browsers) but then you could use width = none and fake the scrollbar with a home made one (div in div and some javascript). Some might say that’s overkill, but to me unstyled scroll bars always visually pop out (mainly an issue since I am mostly a desktop XAML developer where you can style everything to fit perfectly together)
Nice. The exact video I was looking for.
Hate to be maintaining that code after him only to find out that the ‘.vertical-scroll’ class is responsible for the horizontal scroll bars instead 😂
another thing, that i was trying to implement it on my projects.
Kevin I really wish you could approach the :hover state with the width property, so we can get thin scrollbars and thicker when hovering it!
The amount of times you drop content related to my current problem is slightly concerning.. You're a wizard..... 'Harry'.
Great video, as always, thanks for the content!
Sad thing we still can't make scrolbars to expand on hover to this day and age...
I love your tutorials, Kevin ❤️
Thank-you Kevin - great video as always!!👍🏻Could you also do a video on changing the header colours on mobile browers please? I've currently got this implemented on one of my sites, but not sure if there is any extra values I'm missing?!🤔
I'll keep the suggestion in mind :)
Perfect timing! Thakns UA-cam algorithm :)
Just bit bummed, I cannot get Firefox to look anyhitng like that.
Does it work only for Edge and Chrome?
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
same doubt isn't it horizontal!
Great video can’t wait to try this!
save: to playlist -> is not functioning on this video so unable to add to playlist.. fyi.. I presume integrating this into the style(index).css file?
How do we make it so we can click on the page(not scrollbar) & move it up like a mac instead of scroll wheel?
great stuff you are teaching & sharing... something we should all do with the knowledge that was shared with us by others... Concise & Articulated. Very easy to follow along & understand!
Why do you call the horizontal scrollbar - vertical? Awesome video as always.
Because I *always* mix them up, lol
@@KevinPowell very easy mnemonic: horizontal is how the horizon is positioned*
* Disclaimer: doesn't work after too many beers
the explanation was unique
Thank you!!! You are a life saver!!!
I never went this far in customizing them hehe.
I have one that has no height on mobile where the desktop has a custom button controled scroll, too bad Firefox doesn't support exact sized bars.
It does work with my hsl theme slider 😁😁😁
Hi Kevin really nice video , covered most of them,
I really wanted to know if we can change the color of the scroll bar on scrolling (not clicking and dragging just scrolling in the body of the page)
Hi Kevin! Great video as always! I was wondering what fonts do you use and where can I get them? They seem very cool! Keep with the great content!
Most of my demos use Google Fonts :)
It's there in the codepen. For this tutorial it is:
--ff-body: "Heebo", sans-serif;
--ff-heading: "Oswald", sans-serif;
I was going to ask how to style the intersection of the vertical and horizontal bars but the mozilla documentation covers that =>::webkit-scrollbar-corner. 👍
Awesome Kevin!
Can you make a vídeo about nested scrolls? Maybe some columns, with individual scroll, with horizontal scroll for columns.
Very useful video. How to set the vertical scroll thumb shape as a circle?
How about don't mess with scrollbars? Best advice for web design anyone could ever have when it comes to scroll bars.
You are really great, man! I like it.
Thank you,
this really helped me.
2:49 that joke caught me off-guard
Chrome now supports the `scroll-*` properties, though these cannot change things like border radius, but I actually think it's better because in my opinion, custom scrollbars sometimes bring a bad accessibility and changing the color is enough in most case.
8:38 where did you get that info? Is there a website or something?
ohh this is what I wanted Thank You Very Much!
Awesome! This really helped me :D
@kevinPowell I really like your soltion. It looks very good on desktop. Do you have any solution for mobile Chrome or Safari? I tested on iPhone Mobile Safari and Chrome, but wasn't able to implement those fancy scroll bars. Maybe that is idea for next video 😃
What you do, is always interesting....♥️♥️
Been looking for this.
Liked/viewed ratio is over 10%... And still it didn’t really surprise anyone☺️👍
Merci beaucoup pour cette vidéo très claire 🤩
je suis en train de faire mon portfolio et je voulais simplement un meilleur design et grâce à vous c'est parfait !
+1
I'm just happy opera supports webkit
Hey man nice vid! Do you have a video on how to make a page to page scrolling option, not like an actual scrollbar.
Let’s say for example that I’m at my index and it is based on big pictures that cover all the screen. I wouldn’t like a normal scrollbar that leaves me halfway between 2 pictures. I want to be able to scroll down from one menu to another. Thanks a lot 👌🏼
Can you somehow make the thumb flat at the top to avoid that 4:11 ugliness. Like if you scroll it down it becomes round, and flat when it touches the top, that sort of animation. Not sure if this requires JS but really appreciate if you show it in a shorts video or an actual tutorial...
Thanks man.... I really appreciate this
Hi Kevin - quick question about this - is there anyway to capture the drag using CSS (i.e. when dragging the thumb -slider)? I was looking to have a grab effect running, so open hand while over the top of the thumb-slider, and closed while dragging? Thanks in advance, if you see my post. I did look down the pseudos and what-have-you, but couldn't see anything obvious.
can we also change the height of thumb ? and I love your videos..
Good topic as usual, Kevin. But you forgot about arrows. They could be also styled.
i use thin scrollbar on small stuff, for example a card for previewing a post but tags doesnt fit on a single line so you can just scroll it to left or right, because the card has to be a specific aspect ratio.
if i dont make it thin, it looks really ugly on pc
can you please make a tutorial how to make the scrollbar on top of the div?
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.
Just wondering if the reason the margin-inline didn't work on the scrollbar-track is because it can't expand past the 2em you've set on the scrollbar element?
So you'd increase the scrollbar element or add margin to it instead.
Finally... My scrollbara where just missing that @supports,
How did he write on 4 places at once at 6:25
Some IDEs support a multi-caret typing system. If what he's using is anything like VSCode, you can create multiple carets using CTRL+ALT+up (or down), or what he's done can be replicated in VSCode by holding ALT and clicking a character in a script.
Hi Kevin, I really hope you read this comment x)
I just have a question, is there a way to make the scrollbar thumb width increases on hover? I just couldn't make it, since the scrollbar already have its own width.
can you create a table with border radius
with horzontal and vertical scrollbar
and the headers are fixed?
New thing learned today 🤩
How to make scrollbar not pushing the content to the left. Can it have something like position absolute
I’m having issues with edge showing the scroll even when the window isn’t active. Seems like Firefox makes it hide till being used
Wow.. thanks.. it works perfectly🤩🙌🏁
Can we have thumb:hover effect to animate change color like we do with keyframes ? is that possible thanks.
How can a scrollbar width transition be used? I know that it is possible to use a transition for color using inherit, but this cannot be repeated with width.
That's beautiful!
Nice explained..!
I find your vids really usefull
Fantastic video