Scrollbars not visible when disabling native ones

[Denny966]

I've disabled the native scrollbars with css on the whole page:

::-webkit-scrollbar {
    display: none;
    width: 0; /* remove scrollbar space */
    background: transparent; /* optional: just make scrollbar invisible */
}

::-moz-scrollbar {
    display: none;
}

::-o-scrollbar {
    display: none;
}

But then the scrollbars from the library also disappears. Is it by design to also hide the custom ones when add the css above? My point was to use custom scrollbars while disabling the native one...

https://codesandbox.io/s/react-playground-forked-9crjf

[Tomassito]

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?

[Tomassito]

@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.

[Denny966]

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.

[sakhnyuk]

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?

[Tomassito]

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

[sakhnyuk]

@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)

[plandem]

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

[sakhnyuk]

@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.

[plandem]

@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.