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 browser’s 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!
Top comments (8)
It's not a standard, and isn't on track to become one at the moment. I wouldn't suggest using it (unless you know for a fact it will work for your audience).
Having said that, I do actually using it because I'm UI lead for a popular driving game where the UI is implemented with an in-game browser engine that I know supports it.
It's not on standard track for good reason, it's not good UX, at least not if you apply it to the main scroll bar to the right, though for content scrollable areas (like embedded code blocks) it's debatable.
For example using that CSS leads to scrollbars being permanently visible on macOS, despite the user having checked “only show scroll bars on scroll“ in their system settings, which annoys me personally – as you, as the website developer, are essentially overriding a decision I made consciously beforehand.
I agree with what you're saying. However, I feel like new and aspiring web developers should know that a feature like this exists so they can choose whether to implement it on their website. Thanks for providing your thoughts.
Of course! Wasn't a criticism on you sharing this at all. ;) I guess, that's what comment sections are good for, to provide more insight into a topic through discussion. :)
As I said, there are definitely valid use cases for this, where absolutely makes sense to do so to enhance UX too, inline scrollable areas are one thing (as stated with them being debatable) or (I don't know what he's working on exactly) @jonrandy's work project that he mentioned in his comment.
Got it, thanks for sharing @jonrandy! After looking at current browser statistics, around 75% of users would still be able to view the new scrollbar, while the other 25% would presumably see the default browser scrollbar.
View it right now, yes, but other point is that the implementation may change considerably over time - resulting in multiple updates to your site to keep it working.
That's a fair point. Although it's only 15 lines of CSS - reasonably easy to replace/discard.
Example implementation: dnanalyzer.live/