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!
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.
CSS has evolved so much... what is your recommendation to learn the essential basics and the latest useful tricks. PS: of all the RU-vidrs, 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..
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; }
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
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
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.
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.
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.
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)
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.
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.
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
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.
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 😁😁😁
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 was going to ask how to style the intersection of the vertical and horizontal bars but the mozilla documentation covers that =>::webkit-scrollbar-corner. 👍
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.
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)
I’m so confused by what you call “vertical scroll” and “horizontal scroll”. For me the opposite is what is intuitive. Is the way you label them the standard? If so, how did something that moves horizontally get named “vertical”, and something that’s moving vertically get named “horizontal”?
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 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. 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
@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 😃
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 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)
