[csswg-drafts] [css-scrollbars] Force render scrollbar thumb of overlay scrollbars (#9785)

bramus has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-scrollbars] Force render scrollbar thumb of overlay scrollbars ==
One thing that was possible to do with `::-webkit-scrollbar-*` is to create the illusion of having a scrollbar that only shows on hover.

See [this demo](https://codepen.io/bramus/pen/BaMbpoj) which uses the following CSS:

```css
.scroller {
 background: aliceblue;
 
 /* Hide scrollbar by default */
 &::-webkit-scrollbar-track {
  background: aliceblue; /* Same as content */
 }
 &::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 9999px;
 }
 
 /* Show thumb on hover */
 &:hover::-webkit-scrollbar-thumb {
  background: rgb(0 0 255 / 0.35);
 }
}
```

The scrollbar is “hidden” by giving it the same color as the scroller’s background. On hover, the thumb is then given a forced color. This gives the effect of a scrollbar that only gets shown on hover.

---

With `scrollbar-color` and `scrollbar-width` being the standardized way to color scrollbars this is no longer possible when having overlay scrollbars.

See [this demo](https://codepen.io/bramus/pen/jOdJyqB), which uses this CSS:

```css
.scroller {
 background: aliceblue;

 scrollbar-color: aliceblue aliceblue;
 scrollbar-width: normal;
  
 &:hover {
  scrollbar-color: rgb(0 0 255 / 0.35) aliceblue;
 }
}
```

While the thumb’s color does become `rgb(0 0 255 / 0.35)`, it does not become visible on hover. This because of the way overlay scrollbars work (at least on macOS, which I’m using): the thumb only gets drawn when there is some scrolling actively going on (+ some timeout afterwards).

For classic scrollbars this is no problem, as those are always drawn.

I would like to see the ability to show a scrollbar’s thumb on hover for overlay scrollbars restored.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9785 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 11 January 2024 20:08:35 UTC