Scrollbars not visible when disabling native ones about rc-scrollbars HOT 9 OPEN

@plandem Hey 👋
Thank you for sharing. I will check OverlayScrollbars.

I have some plans for future updates. One of the most important is adding scrollbars on all platforms.

from rc-scrollbars.

@sakhnyuk overlay supports iframes and textarea. Almost the only solution that supports it. At least out of the box.

But consistency across browsers/os is more critical than iframe or textarea.

from rc-scrollbars.

Because the scrollbars can differ in browsers/OS we need to measure the native scrollbar size before we hide it and display the custom one (so that we know how much there is to hide).
@sakhnyuk I guess we could try and display the custom scrollbar even if we cannot measure the native one. What do you think?

from rc-scrollbars.

@Denny966 - we haven't heard from sakhnyuk yet, but yeah, the idea behind rc-scrollbars (credit to https://github.com/malte-wessel) is that when you use it, you do not have to make an extra effort of disabling the native ones. They're just not visible.
The webkit used to only work on chromium based browses anyway? Let me know if you need any further support regarding this or close the issue otherwise.

from rc-scrollbars.

I've worked around the issue by specifying the css to the div instead of the whole page. And you can close it if you want.

But imo, the issue is still there because people expect the scrollbars from the library to be visible even when disabling the one of the browser with the mentioned css.

from rc-scrollbars.

Hey guys! @Denny966 @Tomassito
So sorry, for my silence. I don't know how I skipped that issue 🤷‍♂️

The main problem here is not about scrollbars visibility while display: none. But yeah, like @Tomassito said, our scrollbars depend on native ones.
So, when native scrollbar width = 0, we don't render our ones at all. What cases? Here you go:

• macOS has a default system setting when scrollbar width = 0 and here is a big problem. A huge count of users doesn't see our work 🤦‍♂️
• mobile phones (android/ios) has scrollbars width = 0 and we also don't render scrollbars there.
• Never tried tablet, but I think there is the same problem
• @Denny966 issue display: none

I think we can try to skip the native scrollbar width check and hide 20-25px on the right side and on the bottom (with RTL left and bottom).
But how we turn it on? By default or by special prop?
what do you think guys?

from rc-scrollbars.

@sakhnyuk If there's no native ones = there's nothing to hide, so no reason for negative margins, hm?

from rc-scrollbars.

@sakhnyuk If there's no native ones = there's nothing to hide, so no reason for negative margins, hm?

But it doesn't mean that native scrollbars don't render. MacOS and phones render it over the block (and scrollbar block is 0)

from rc-scrollbars.

check this one: https://github.com/KingSora/OverlayScrollbars

It works the same on OSX/Windows, with autohide (OSX/iOS) or without(OSX/Windows). That was the main reason to switch from this package to overlay, even it has a bigger size and harder to customize :( but consistency on all platforms is critical.

There is also another react version: https://github.com/rommguy/react-custom-scroll

from rc-scrollbars.