Styling scrollbars with CSS

PublishedDecember 17, 2021

•2 min read•View as Markdown

Thomas Portelange

A Web Developer based in Belgium, specialized in PHP & JS development

Comments

Join the discussion

No comments yet. Be the first to comment.

More from this blog

A git diff with all changed and new unstaged files

I recently needed to collect all changes in one file for reporting purposes. Found this article: https://ratfactor.com/cards/git-diff-with-new-files In case you need something similar on Windows, here

Jul 27, 20261 min read

A git diff with all changed and new unstaged files

Writing a Zero-Dependency CSV and XLSX Reader/Writer

Some projects start with a grand plan. Others start because you just need to read a file without thinking too much about it. That was the case for spread-compat. I needed a common interface for CSV, X

Mar 6, 20265 min read

Writing a Zero-Dependency CSV and XLSX Reader/Writer

Media Queries Level 5 are awesome

With modern css, you can almost get rid of sass. But there is one last pain point : media queries. Not being able to use variables or an easy, common syntax for typical breakpoints is really annoying. That is, until you meet Media Queries Level 5. I’...

Oct 10, 20253 min read

Modern tooltips

This is a quick article to share this demo I just made. https://codepen.io/lekoalabe/pen/JoPNWpX

Dec 20, 20241 min read

Using Dialog elements today

Modals are typical UI elements for many web apps. There are countless packages dedicated to that specific features, each framework creating its own variation. Popular frameworks like Bootstrap also have custom code to deal with it. But all this feels...

Oct 29, 20243 min read

LeKoala Dev Blog

47 posts

The current state is not great

So here is the deal: while you can do really funky things in webkit, it will not be working in Firefox because it supports only two properties:

scrollbar-width

scrollbar-color

So except if you have full control over which browser your visitor will be using (or if you are happy to provide a different experience for your visitors, but I'm not sure what your designer will think about that), you only have a limited set of option.

In terms of width, you will probably go with "thin" which removes the scroll buttons that nobody uses anyway and get a scrollbar that has a width of about 8px.

scrollbar-width: thin; /* Yep, that's the only line you need to know */

In my opinion, it's better to stick with simple, minimalist scrollbars that are consistent for Chrome and Firefox.

Color is not always that easy

In Firefox, when you set a color for your scrollbar, it will automatically be tinted with a tinted variant on hover (a lighter one for dark colors and a darker one for light colors). This is not the case in Chrome, so you have to define hover yourself. This can be done this way for example:

.scroller { --scroller-color: 0, 0%; --scroller-color-lightness: 80%; --scroller-hover-factor: 0.8; --scroller-thumb: hsl(var(--scroller-color), var(--scroller-color-lightness)); /* Replicate hover for webkit */ --scroller-thumb-hover: hsl( var(--scroller-color), calc(var(--scroller-color-lightness) * var(--scroller-hover-factor)) ); --scroller-background: transparent; scrollbar-color: var(--scroller-thumb) var(--scroller-background); scrollbar-width: thin; } .scroller::-webkit-scrollbar { width: 8px; } .scroller::-webkit-scrollbar-track { background: transparent; } .scroller::-webkit-scrollbar-thumb { background: var(--scroller-thumb); } .scroller::-webkit-scrollbar-thumb:hover { background: var(--scroller-thumb-hover); }

The issue with border-radius and scrollbars

So it's easy enough to get nice looking boxes without using JS libraries but then, suddenly, you have a border-radius to your boxes and tadaa... it's not looking great, at all.

There are a couple of solutions:

Using a clip-path:

.round-box { clip-path: inset(0% 0% 0% 0% round 1em); }

Or maybe go a bit crazy and use pseudo-elements if you don't like to see your beautiful scrollbar clipped in a strange way:

.round-box-holder { border-radius: 1em; contain: content; position:relative; width:fit-content; } .round-box-holder:before, .round-box-holder:after { position:absolute; top:0; right:-8px; content:""; width:1em; /* should match padding l/r */ height:1em; /* should match padding t/b */ background:#fff; z-index:2; } .round-box-holder:after { top: auto; bottom:0; }

Almost works but out of alignement for Safari.

Command Palette

Comments

More from this blog

The current state is not great

Color is not always that easy

The issue with border-radius and scrollbars

A demo