Create custom Scrollbar with CSS and React.js | Beginner Tutorial

there are times where the scroll bar really doesn't fit into the main theme of the website and really becomes a distraction for it for this we can actually add custom scroll bars with CSS so let's go back to the application and go into your index.css currently as you can see it's completely empty for me and you can say webkit web kids Dash scroll bar in here we'll remove the original scroll bar by saying width 8 pixels as you can see instead of the usual scroll bar we simply have this white 8 pixel line under here we can paste work it again Dash scroll bar Dash Track and say background simply background and say hash zero zero zero so now this thing is black under here we can say Dash scroll bar Dash sum and say background hash 1 f f d a 25 and say border Dash radius 4 pixels and the final webkit will be Dash scroll bar Dash sum Dash actually hover like this and in here we can say background of hash to AC 231 like this and now we have this custom scroll bar which changes slightly changes color when you hover over it and it works just like the normal scroll bar thank you for watching see you in the next one

Channel: WebChain Dev

Views: 3,412

Keywords: custom scrollbar css, custom scrollbar, html, css, custom scrollbar css for all browsers, custom scrollbar css ie, css tutorial, web developer, web development, react js, react js tutorial, react js beginner tutorial, css beginner tutorial, web dev, website design

Id: Sfb2KNEC8_Y

Length: 1min 57sec (117 seconds)

Published: Mon Jun 26 2023