gemini-scrollbar custom overlay-scrollbars with native scrolling mechanism for web applications (when needed)

Problem Description

Nowadays, many OS's provides “overlay-scrollbars”. Those scrollbars looks nice and works well (mostly mobile browsers). I am OK with that, but building web apps, you may still found yourself searching on how to customize the remaining portion of ‘ugly’ scrollbars out there, specially when they do not fit with your designs. e.g: “having a sidebar with a dark-background + native-non-floating-scrollbars on them” ...hum, ugly. Yes, the problem can be merely visual, but for me is a way of enhancing the user experience.

Constraints

• Fallback to the native scrollbars when the OS/browser supports “overlay-scrollbars” natively
• Mimic the native scrollbar behaviour when replaced with the custom ones (click, drag...)
• IE9+ support

Solution Proposal

First, we check the scrollbar size, if the scrollbar size is equal to zero (which means the scrollbars are already “over the content” natively) then we do nothing, otherwise we “hide” the native scrollbar (leaving its functionality intact) and create a new pair of “scrollbars” made of divs that you can fully customize with CSS. Those “scrollbars” will update its position while scrolling for visual feedback and will also respond if you click or drag them.