@KiwisCode
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.
@zachjensz
This really raises the bar for scrolling
@Melksh1
I love how you actually demonstrate multiple options instead of just a plain tutorial.
@_ap__
I love Kevin's professionalism and premium style tutorials.
@MarcHoekstra
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!
@graaam101
6:36 "vertical-scroll" - affects the bit that scrolls horizontally 🤣 Pretty sure that is right out of my playbook of goofs!
@domenicpolsoni8370
I'm a simple man. I see a new video by Kevin, I watch and upvote.
@jonmayer
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.
@candym5280
CSS never ceases to amaze me
@tayyabnoor7471
Every front end developer should watch this video
@ALex-ts1gu
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.
@MichaelHitzelberger
Nice video, thanks! What got me confused a bit: Your 'vertical' scroll is actually a horizontal one. 😕
@AttackHelicopter64
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
@r3pwn-dev
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
@carolmckay5152
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; }
@Gregorius421
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ш
There is another one useful property ::-webkit-scrollbar-button. It could be pretty helpful to hide controls.
@jdlowen
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..
@adityasagar9078
So easy to understand and so professional,you made my website look good
@KevinPowell