React-custom-scrollbars: OSX overlay scrollbars

[malte-wessel]

Native scrollbars are shown, when in OSX environment and overlay scrollbars are activated.

[malte-wessel]

See #20

[s-panferov]

In addition I want to mention some interesting OSX behavior. By default, if you use touchpad or MagicMouse, your scroll-bars are zero-width, but if you attach another mouse — your scrollbars immediately become visible and have non-zero width.

So this trick with memoization can go wrong https://github.com/malte-wessel/react-custom-scrollbars/blob/master/src/utils/getScrollbarWidth.js#L5

[siennamw]

I'm also interested in styling scrollbars for OSX. Mimicking OSX scrollbars is very useful, but until you can style across platforms that's your only option if you want to be consistent.

[malte-wessel]

The library relies on checking the scrollbars width in order to hide them. When overlay scrollbars are activated in OSX, the width will be 0 and the native scrollbars are shown. In this case you don't know the size of the native scrollbars and you cannot reliable hide them. That's the reason why I'm not planning to support this case. Hope you understand.

@s-panferov I think this is an edge case and in favor of performance I'll stick with that approach.

[burdiuz]

I wish I've seen this before integrating it into my project. @malte-wessel, are you planning to add this crucial information to the front page of the project preferably in bold in near future after all those rejected PRs?

[CaptainN]

Is it possible to disable the native scrollbar and always use the fake one used on Windows?

[cdtinney]

For anyone reading -- my workaround is to copy the util function, getScrollbarWidth, into my own project. I then check if it's zero inside render and if it is, hide the vertical/thumb tracks via CSS classnames and ensure margin is set to 0.

You end up with two different looks but at least scrolling is functional for this edge case.