An Interest In:
Web News this Week
- April 2, 2024
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
Some of Our Sources
- Slashdot
- Just Creative
- Noupe
- Fudge Graphics
- CSS Tricks
- Web Resource Source
- Android Dissected
- Android Headlines
- Dev To
- Hashedout
Help Webnuz
Referal links:
November 17, 2022 12:39 am GMT
Original Link: https://dev.to/verisimilitude11/modern-rounded-scrollbar-implementation-using-css-mbk
Modern, Rounded Scrollbar Implementation Using CSS
Are you wondering how you can have a modern, rounded scrollbar for any other website you're designing? Read on to learn about how you can implement a scrollbar similar to one on Stack Overflow, Outlook.com, and DNAnalyzer.live.
::-webkit-scrollbar is a pseudo-element in CSS employed to modify the look of a browsers scrollbar. Chrome, Edge, and Safari support this standard, while Firefox doesn't.
The code:
CSS:
/* width *//* set the width of the scrollbar */::-webkit-scrollbar { width: 10px;}/* Handle *//* set the color of the scrollbar and the radius of its corners */::-webkit-scrollbar-thumb { background: rgb(150, 150, 150); border-bottom-left-radius: 5px; border-top-left-radius: 5px; border-bottom-right-radius: 5px; border-top-right-radius: 5px;}/* Handle on hover *//* set the color of the scrollbar when hovered over */::-webkit-scrollbar-thumb:hover { background: rgb(131, 131, 131);}/* Handle on active *//* set the color of the scrollbar when clicked */::-webkit-scrollbar-thumb:active { background: rgb(104, 104, 104);}Template HTML:
<!DOCTYPE html><html> <head> <title>Page Title</title> </head> <body> <h1>Rounded Scrollbar Example</h1> <p>Filler text</p> <p>Filler text</p> <p>Filler text</p> <p>Filler text</p> <p>Filler text</p> <p>Filler text</p> <p>Filler text</p> <p>Filler text</p> <p>Filler text</p> <p>Filler text</p> <p>Filler text</p> <p>Filler text</p> <p>Filler text</p> <p>Filler text</p> <p>Filler text</p> <p>Filler text</p> <p>Filler text</p> <p>Filler text</p> <p>Filler text</p> <p>Filler text</p> <p>Filler text</p> <p>Filler text</p> <p>Filler text</p> </body></html>GitHub repository: https://github.com/Verisimilitude11/RoundedScrollbar
Feel free to comment below if you have any questions or want to share your website with a modern scrollbar!
Original Link: https://dev.to/verisimilitude11/modern-rounded-scrollbar-implementation-using-css-mbk
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To