How To Create Custom Scrollbar In CSS

[@johnm800]

Right on time. I legit needed this now

[@mafiakingc]

Me too lol

[@mr.wazirgaming2696]

Same to you guys 🤣

[@OmarAbdelaziz__47]

same here

[@pietro5266]

I watch *a lot* of programming videos. This is one of the best I've seen, period. Also, great guitar selection :)

[@chhavimanichoubey9437]

learning something new every day is my daily fix.

[@VidTDM_XD]

you can also use border-raduis on the ::-webkit-scrollbar-thumb to make itr rounded

[@junny_toon]

Hello!! I’m Korean coder I love your video ❤️ Thanks!!

[@zeyarabani8183]

Hey Kyle, unrelated to this video but can you do some videos on security in the future, like injection, DDOS even XSS, those sorts of attacks are much easier and common for monolithic websites which you don't make on your channel, but I'm curious how they would work with the more modern structure and even more importantly how we would protect ourselves from those attacks.

[@prasannanaik1023]

Here we go one more great content ❤️

[@theoneandonly1833]

I was just trying to figure out how to do this! Thank you!

[@bilalch898]

I was searching for it last day. And today you upload the video 🔥

[@andreiiaz2097]

Fantastic video! t Thanks yet again, Kyle! I just have a question: where in the description is the CSS cheatsheet?

[@discjockeydado]

Are your fans called WebDevSimps?

[@netsurfer2006]

ROFL!

[@ezequielzion]

Nice one Kyle! Thanks for these tutorials

[@ThaRealIansanity]

Thanks for great info. I thought it wasn't working in FF but I had a comma between the 2 colors. Should be no comma.

[@arnauddsj-monagencecreative]

cool but what about the arrows in the second example?

[@puspamadak]

If we use vw unit for the scrollbar, won't it become dependent on the browser's width? What if the user resizes the browser?

[@sohamjanagave20]

Plz a blog with mern stack tutorial with image upload and s of twitter and instagram

[@blackpurple9163]

Watching this after Kevin's video on this topic and I'm glad I've watched both learning something new in each video about fancy scrollbars, anyway can we animate and use images in place of thumb and/or track?

[@user-mr8ng9er1k]

that was so helpful, thanks!!

[@willingways5534]

Amazing tutorial Bro... One humble request is to add Subtitles if you could because English is not our native Language.

[@em-arko]

can you tell us how we can change the position of an scrollbar?

[@jamesrosemary2932]

Oh by the way. You can use border-radius in -webkit-scrollbar-thumb too.

[@tucer774]

thanks bro

[@snjvthakur24]

Thanks sir, waiting for one video from your side scroll to top from bottom of webpage by clicking icon.

[@suryak2625]

Hi bor am from india your doign great videos i like it and am learing more stuff from you, great job keep doing...

[@Seerealstudio]

Does webkit pseudo supports in firefox also Aur not

[@aakashsinha9641]

really appreciate your work

[@yahyasalimi3254]

Thank you very much for this amazing content. How do I make my div element scroll-able vertically? and also apply these styles using webkit?

[@puspamadak]

Instead of using *html::-webkit-scrollbar* use *div::-webkit-scrollbar*

[@johnh9661]

Dude, Keep going. Your content is helping me so much to broaden my horizons in so many ways. Have you ever thought of giving java backend tutorials too?

[@adityapundir6529]

Amazing Bro!!!

[@mokshnigamsatsangi1780]

I just realized at the end of the video when you were giving the outro that the sound (tune) you use in your video intro is made by you yourself and you used that guitar I can see in the back in the outro clip. Right ? By the way, extremely helpful video !

[@blakemann2365]

Thanks Kyle, can you please do a video on running django and node.js servers simultaneously in an app?

[@alphamx13]

Awesome tutorial, just one question.. how do you apply transition on hover ? thanks!

[@irawo8142]

The transition should be in the element and not in the hover state. Ex: header { opacity: 0.3; transition: opacity .3s linear; } header:hover { opacity: 1; }

[@AA-oi9ru]

Next video on custom cursor and pointer

[@developer4613]

Thanks for you video.

[@martincruzdev]

What about the height of the thumb?

[@PerceptronGameplay]

please a tutorial to implement viewpager in HTML using javascript

[@stefanpfadt4353]

Great video! Any chance to make Firefox exactly the same? I could only get Chrome and Edge to work.

[@armaanraval5048]

Thank you so much :)

[@jackcollazo]

Great video. Thank you! But firefox needs to really get better cause I can't even apply gradient for color.

[@theshredguitarist25]

That Jackson. Beautiful! What kind is it? What kind of pickups?

[@nihiler]

Thanks a lot.

[@shrkawy]

you are reading my mind

[@iroshanaravishan1388]

Wow.. its really nice🤩🙌🏁

[@jordynfinity]

Please post this on SO so I can upvote it. I've been looking for weeks and have gotten a whole lot of nothing

[@daudahmed2343]

Thanks for this helpfull video

[@Restackable]

Why is bro georgious

[@canra245]

thank you very much

[@tharshant553]

Hi Kyle, Your videos are very helpful to do my project as a beginner. Could you please explain about Firebase-version 9 functions for web... ??

[@theshredguitarist25]

Also great video thank you.

[@sharansharma19]

Can't find the cheatsheet

[@vauntedfalconer2027]

omg, this is so easy 😍😍

[@argentinaspy_oc]

wait, unit VW means scrollbar width will change with window width (4vw = proximately 4%) dat sucks

[@fabiogloor]

Thx for the tutorial. Really nice. Question: Where do I find the mentioned cheatsheet? Thx in advance...

[@WebDevSimplified]

Looks like I forgot to include the link in the description. It should be there now. Thanks for letting me know.

[@fabiogloor]

@@WebDevSimplified Oh, thx man. I looked there but I don't know why I didn't found it yesterday. Now I have it. Thx...

[@codelul]

Love the video, been looking for this for a while, but I noticed that you have to hover over both to get the darker color, what if u want to just hover over one of them and get the same result? Will it require JavaScript this way?

[@TheGaneshshow]

Thanks a lot:)))

[@cycu7968]

how to set scrollbar for scrolling from bottom to top without external liblary? for example for apps like facebook messenger when I wanna display new messages on the bottom and older will be displayed on top

[@user-qb1dn5lh9j]

How to add space between scrollbar and right border of window?

[@CoolPeopleNetwork]

will that scroll bar have that same feature after the update on mobile view as well?

[@danielraducu9073]

i love your channel

[@oobleck147]

Doesn't work on both Firefox on and Chrome :(

[@thatcodplayer5153]

So how would I make the scrollbar look like the one in the thumbnail

[@AnkitKumarMehta95]

Amazing 👍

[@Skaar18]

I am really hoping you can help me, i have searched far and wide on the internet, but i cant find an answer. Is it a way to make the scrollbar thumb start at the middle of the scrollbar, so u can scroll up and down when you first get to the page? The scrollbar is within a div element. Thanks :)

[@mr.wazirgaming2696]

Is this triac work on that section on which we decler Overflow: scroll;

[@TheScriptingLegend]

Yooo can you make a video on how to make a whiteboard animation with html, css and possibly js

[@maximilianomoyano9748]

Um, where is that CSS cheatsheet you mentioned?

[@nightcode.]

search in other videos description

[@mdismailhossain5775]

please make typescript video

[@ricko13]

I've notice that you can't change the width on hover

[@bilalullahkhan5517]

Hello Kyle, may god bless you. What is your computer degree?

[@altairbueno5637]

This guy just transformed a usable webpage into an accessibility mess

[@lollp6361]

Is the newsletter chargeable?

[@AlphaFrog1021]

It would be very cool if you started making youtube shorts

[@abhilashkumar6317]

Hey, if anybody can help me , my scroll bar is stuck and not working . Thanks in advance

[@saiprakash1125]

Hi Kyle great video. I have one doubt. Can u close the browser tab using a click of a button in react . I m really stuck in this for a while. Please can u help me

[@pneujai]

just use window.close()

[@sonlengoc948]

But it doesn't work on IE.

[@kshitijtiwari3426]

How did you circularize the edges on the scrollbar (as shown in thumbnail)?

[@zishanansari4346]

You can use border-radius property for that

[@mykalimba]

Yeah, this. I'm kind of disappointed that he didn't create a scrollbar that looks like the one in the thumbnail.

[@kshitijtiwari3426]

@@zishanansari4346 Thanks

[@jabbysammich]

Okay but how did you do the thing in the thumbnail?

[@Matin1999_unique]

perfect

[@i5artube]

Not really (0:00): custom scrollbars are a pain for the user.

[@sharakpl]

And here I thought it's Firefox that lacks the ability to customize scrollbars. Turned out once again that Firefox not only has what's required, but also it's implemented in more sane and developer friendly way. Only thing they need to work on is performance of site animations.

[@asifhossain2088]

When u love the CSS😍 More than your Wife. plz never mind. I really love this 😍😍

[@sadiqcumar2468]

Will you make vuejs video ?

[@straya_au_]

how you remove it on all websites its so annoying

[@patrickren7395]

Scrollbar is literally in every site and yet we still have to deal with browser compatibility issues, writing 2 set of styles, not cool! webkit prefix allows you to do more customization but I just hate vendor prefixs

[@user-in7cy8og3g]

not working

[@senaytech4822]

Do U know! how you change my life.👍😂😂

[@bienvenidovillabroza351]

Wait… you can do that 0,o ty for the knowledge

[@Victor_Marius]

What!!! The Firefox way is the standard and all others will follow it in the future?! The way where you are using the pseudo elements (::-webkit-scrollbar, *-thumb, *-track) seems more logical

[@sashakoshka]

i'd be pissed off if the chrome way became standard. it seems very bad for accessibility.

[@Victor_Marius]

@@sashakoshka what accessibility? You mean hover and active? I think it already has that. You can't get a scrollbar focused. Also the scrollbar is a totally new element (not a trait of the scrollable element), it is bounded to the scrollable element (like an after pseudo element) and it is very complex. Would be a shame if all you could do is to set the track and thumb colors, and a thinner width. I hope at least they will add more properties in the Firefox standard.

[@NuttySwiss]

Please don’t do this. I have custom accel/speed settings for my scroll bars in my system settings. These scroll bars never get it right and end up being pretty much unusable for me. 😢

[@WebDevSimplified]

This shouldn't change any of that since it only modifies the css and not the actual implementation of the scrollbar.

[@musicord3132]

Hey, man is your react course outdated? or is it still relevant? Can you give me some updates?

[@WebDevSimplified]

It is still 100% up to date

[@ankitsrivastava3399]

These custom scrollbars are good enough for windows, but on Mac they will make mess. We already have elegant scrollbar on mac that hides themselves when inactive. These custom scrollbars will override the functionality.

[@sohamjanagave20]

Plz

[@golakjena]

very nice 🤝

[@amarg26]

What about browser support?

[@pqudah]

Did you even watch the video?

[@maheshguptha9796]

@@pqudah hahahhaha true

[@pneujai]

not for android firebox and ios safari

[@akalrove4834]

But but IE11

[@zlackbiro]

And, yes. Doesn't work on firefox... :D

[@PTM1008]

@Fireship would have simply done this in 100 seconds

[@75Quake]

stop advertise scam sites, who don't work

[@khizrshaikh9902]

First comment, like and view I want heart

[@xenon4602]

Dont make videos on topics that can be easily searched on google.

[@mariabaldwin3012]

vae.fyi great