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?
@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.
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.
@@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.
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!
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.
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.
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;
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.
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.
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)
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 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 😁😁😁
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. 👍
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!
When I use the code, the Chrome style is no longer applied. It worked until recently. I think because of the new support for "scrollbar-width". / Style Scrollbar works on Chrome, Edge, and Safari ::-webkit-scrollbar { height: var(--scrollbar-height); /* height of horizontal scrollbar */ width: var(--scrollbar-width); /* width of vertical scrollbar */ } /* Track */ ::-webkit-scrollbar-track { background: var(--scrollbar-track); } /* Handle */ ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); } /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { background: #808080; } /* Scrollbar corner */ ::-webkit-scrollbar-corner { background: var(--scrollbar-track); } // Scrollbar for Firefox * { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } ---------------------------------- I changed it to from this: * { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } to this: /* Browsers without `::-webkit-scrollbar-*` support */ @supports (not selector(::-webkit-scrollbar)) { * { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } } now it works again.
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?!🤔
For some weird reason, .. in the real world of actually using the browsers. @supports ( scrollbar-color: red blue ) { * { scrollbar-color: hsl(59, 93.7%, 49.8%) (this is a # +)17badf; /* single colour at the end: works. */ /* note: the # tag made it a link, re-edited. */
/* hsl(180 75% 50% / 1) hsl(285 100% 10% / 1); -- Firefox really doesn't like that, and stubbornly shows the default grey on black scroll bar. */
} } Of course, chrome works well. Thankyou for pointing out the ( margin-block: .5em; ) tag. Never thought of that, brilliant: learning all the time. Many thanks for the tutorial, opened up a world of possibilities. Stay well, ..
can you please make a tutorial how to make the scrollbar on top of the div?
2 года назад
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)
As an intern It was a nightmare for me get the scrollbars look the exact same on Chrome, Firefox and the old Edge browsers with the design I got from my seniors. Ended up using nicescroll lol.
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
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...
@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 😃
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
ruclips.net/video/oShTJ90fC34/видео.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
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!!! ;)
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
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.
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?
CSS never ceases to amaze me
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'm a simple man. I see a new video by Kevin, I watch and upvote.
Every front end developer should watch this video
So easy to understand and so professional,you made my website look good
Hi man, you saved me from a mess I was in for hours, thank you
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 😂
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!!!
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; }
There is another one useful property ::-webkit-scrollbar-button. It could be pretty helpful to hide controls.
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.
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 :)
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.
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;
another thing, that i was trying to implement it on my projects.
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.
How about don't mess with scrollbars? Best advice for web design anyone could ever have when it comes to scroll bars.
This is a fantastic tutorial, thank you for making this!! Helped me so much!
I'm just happy opera supports webkit
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.
The amount of times you drop content related to my current problem is slightly concerning.. You're a wizard..... 'Harry'.
Such a great, straightforward video
Very informative video. I was looking for customising scroll bar and stumbled upon this video 😁
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 so much! I really enjoy watching your videos to learn something new :D
Tried this out and worked great! I noticed my scroll bars in Firefox had rounded corners though too, so it must’ve worked!
Nice. The exact video I was looking for.
Super insightful video. Thanks Kevin.
Amazing stuff as always, thanks a bunch for this, I learnt a lot!
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
the explanation was unique
I love your tutorials, Kevin ❤️
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 😁😁😁
2:49 that joke caught me off-guard
Awesome video man! You make it so easy to understand
Thank you!!! You are a life saver!!!
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 was going to ask how to style the intersection of the vertical and horizontal bars but the mozilla documentation covers that =>::webkit-scrollbar-corner. 👍
Finally... My scrollbara where just missing that @supports,
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
very interessting ! thanks u save my life
very nice tutorial
Thank you,
this really helped me.
Great video can’t wait to try this!
Man I know JavaScript really well but I suck at css, that's why I work more on the backend side of things with python.
Fantastic video
Thanks man.... I really appreciate this
ohh this is what I wanted Thank You Very Much!
Awesome! This really helped me :D
Liked/viewed ratio is over 10%... And still it didn’t really surprise anyone☺️👍
You are really great, man! I like it.
Perfect timing! Thakns RUclips algorithm :)
Just bit bummed, I cannot get Firefox to look anyhitng like that.
Does it work only for Edge and Chrome?
When I use the code, the Chrome style is no longer applied. It worked until recently. I think because of the new support for "scrollbar-width".
/ Style Scrollbar works on Chrome, Edge, and Safari
::-webkit-scrollbar {
height: var(--scrollbar-height); /* height of horizontal scrollbar */
width: var(--scrollbar-width); /* width of vertical scrollbar */
}
/* Track */
::-webkit-scrollbar-track {
background: var(--scrollbar-track);
}
/* Handle */
::-webkit-scrollbar-thumb {
background: var(--scrollbar-thumb);
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #808080;
}
/* Scrollbar corner */
::-webkit-scrollbar-corner {
background: var(--scrollbar-track);
}
// Scrollbar for Firefox
* {
scrollbar-width: thin;
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
----------------------------------
I changed it to from this:
* {
scrollbar-width: thin;
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
to this:
/* Browsers without `::-webkit-scrollbar-*` support */
@supports (not selector(::-webkit-scrollbar)) {
* {
scrollbar-width: thin;
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
}
now it works again.
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 :)
it's sad that this is still W.I.P. ... I styled my (webkit)scrollbars in like 2015 or earlier ...
you saved me! Thanks
What you do, is always interesting....♥️♥️
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!
Awesome Kevin!
Been looking for this.
God bless you sir, tank's.
Can you make a vídeo about nested scrolls? Maybe some columns, with individual scroll, with horizontal scroll for columns.
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 find your vids really usefull
thanks Kewin👌
New thing learned today 🤩
For some weird reason, .. in the real world of actually using the browsers.
@supports ( scrollbar-color: red blue )
{
* {
scrollbar-color: hsl(59, 93.7%, 49.8%) (this is a # +)17badf;
/* single colour at the end: works. */
/* note: the # tag made it a link, re-edited. */
/* hsl(180 75% 50% / 1) hsl(285 100% 10% / 1);
-- Firefox really doesn't like that, and stubbornly shows the default grey on black scroll bar. */
}
}
Of course, chrome works well.
Thankyou for pointing out the ( margin-block: .5em; ) tag.
Never thought of that, brilliant: learning all the time.
Many thanks for the tutorial, opened up a world of possibilities.
Stay well, ..
The supports worked for me in all the testing I did 🤔
can you please make a tutorial how to make the scrollbar on top of the div?
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)
As an intern It was a nightmare for me get the scrollbars look the exact same on Chrome, Firefox and the old Edge browsers with the design I got from my seniors. Ended up using nicescroll lol.
Wow very nice video :)
Now only if we can make the good old lickable aqua scrollbars with CSS, nirvana will be achieved. Maybe a CSS challenge?
RUclips scrollbar is also costumed!
That's beautiful!
Thanks for this sir.
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!
6:32 but that's a horizontal scroller
Maybe try next time when you hover scrollbar gets bigger.
can we also change the height of thumb ? and I love your videos..
So awesome, thank you
thank you
It's a good video for learners
Thanks.
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
thanks man
thanks my G
TY m8!
@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 😃
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