A scrollbar proposal

Admit, this is a first world problem. However, it bugs me that scrollbars are “broken” on many websites — at least on MacOS/iOs.

The “problem”

Reminder: the scrollbar thumb color is based on the background color of body. A light body background will produce a normal dark scroll thumb.

A dark body background will produce a light scroller. I think that is an OS-thing, as the implementation is mostly the same on all browsers (Firefox, Safari, Chrome).

Now i often see websites with a dark body but a light content DIV — which renders as a ghost scroll-thumb. In some cases the frontend designer can fix that. But websites, these days, are often long and colorful with multiple backgrounds.

The “Fix”

This dirty mockup here illustrates a scroll thumb that is always visible, no matter the background color. It uses the blend mode “difference”.

The original idea was to build something useful with the CSS property “mix-blend-mode”—but I got stuck in stacking-order. In most cases, OS-elements should probably not be manipulated.