Background

Website developers/designers can now customize the scrollbar in the browser, using this spec: https://drafts.csswg.org/css-scrollbars-1/

Browser support is now over 97% https://caniuse.com/?search=scrollbar

Issue

I have come across several websites that have customized the browser scrollbar. But their websites have really bad Scroll Jank issues!

"Jank" is the term used to describe the visual hiccup that occurs when the system is not able to build and provide frames in time for them to be drawn to the screen at the requested cadence (60hz, or higher). Jank is most apparent when scrolling, when what should be a smoothly animated flow has hiccups, where the movement pauses along the way for one or more frames as the app takes longer to render content than the duration of a frame on the system.

Because of the JANK issues; when I try to use the mouse wheel to scroll down the webpage. The jank is preventing the page from scrolling down. So I try to grab the scrollbar with the mouse pointer and move the scrollbar down.

However, I have seen quite a few websites with really thin scrollbars that I end up spending several minutes trying to grab a scrollbar that is say 1-3px wide for example.

Solution

The solution would be for browser vendors to transform the scrollbar width to the normal width (or a width of a minimum set standard) when a user hovers the mouse pointer over the scrollbar. This way people with accessibility issues (such as myself - who has Osteoarthritis in my hands) can easily grab customized scrollbars that are so thin it would be very tricky to click on them with the mouse pointer needing to grad and scroll the browser scrollbar on a computer!

Example:

Above when a user moves the mouse pointer over the customized scrollbar the width is automatically increased to make it easy for users to click and grab the scrollbar (when the scrollbar has been styled too thin on a set predefined width).

Open-ui

Can create some customized browser scrollbar examples that have accessibility patches built in, that developers can use. Also create a spec that incorporates customize scrollbar css and accessibility standards.

Extends this issue: #8

Browsers

I have noticed browsers like Chrome and Edge have started adding some proposals from this repo into their browser designs and I hope Browsers can add this enhancement to patch poorly designed scrollbars that have accessibility issues!