Custom scrollbars not showing

[unematiii]

I'm trying to create scrollable content inside custom view (wrapper), but I cannot get this library to work. My custom tracks are not displaying, they are in DOM, but have style display: none;. Instead I'm seeing browser native scrollbars.

See this example

[fourjr]

I faced this issue earlier on webkit browsers after hiding the scrollbar. Set visibility: hidden instead of display: none for the ::-webkit-scrollbar and it should be fixed.

::-webkit-scrollbar {
  visibility: hidden;
}

The issue was caused by this library trying to calculate the default scrollbar width and using that width. Since it doesn't exist, it returned 0px and created a non-existent custom scrollbar.

[chengkailiu]

I have the same problem，I don't know how to add ::-webkit-scrollbar to that.

[JesusTheHun]

@RobPethick are you willing to accept a PR for this issue ?

[RobPethick]

Yes I'm very happy to look at a PR for this

[unematiii]

@fourjr What about Firefox?

[JesusTheHun]

I'm working on this right now.

@fourjr What about Firefox?

Firefox is an issue right now because it uses floating scrollbar and doesn't allow to force them to not float (as we can do with webkit), so we cannot detect its width.

@RobPethick what is the reason for detecting the browser scrollbar width and not applying a fixed developer defined width ?

EDIT : other than Firefox it works just fine

[JesusTheHun]

If I assume we want the browser scrollbar width to keep user's preference, we have an issue with those floating scrollbars : they have a regular and a focused mode :

They have a different size. On safari they are respectively 16px and 32px (24px for the scrollbar itself).

Right now there is no solution for Firefox 100+. You just can't detect the scrollbar width in any way.

So I suggest that for the PR I include the fix for webkit, and if we can't detect the width for firefox (Firefox 100 +), we fallback to 16 as it is the default value for all browsers I have tested. Does that sound ok to you @RobPethick ?

[NikkiMeganMoore]

Setting visibility: hidden on ::-webkit-scrollbar in @fourjr 's solution does work (for webkit browsers), but only if you set it globally. I tried setting it only on the element I was using the custom scrollbar with and it did not have the same effect:

.scroll-container::-webkit-scrollbar {
  visibility: hidden;
}

Is there a way to apply this style for a single scroll container only? I am using this in a component library and do not want to apply these styles globally to the each app importing the library.

[JesusTheHun]

@NikkiMeganMoore to mesure the width of the browser's scrollbar, this lib create a div with overflow: scroll and appends it at the end of document.body. That's why you need to set a global style.

So far my hack to minimize the impact has been the following :

body > div:last-child::-webkit-scrollbar {
  visibility: hidden;
}

/* React apps lives inside a #root by default */
#root .custom-scrollbar *::-webkit-scrollbar {
  visibility: hidden;
}

Then you must add the class custom-scrollbar to the component :

<Scrollbars className={'custom-scrollbar'}> ... </Scrollbars>

[m7kvqbe1]

Looks like it just doesn't work at all in Firefox.

Any ideas on how we might be able to resolve it? Maybe some sensible defaults when Firefox is detected?

https://github.com/RobPethick/react-custom-scrollbars-2/blob/a5838518889667dfc755d4d4d5b2e99018416c5c/src/utils/getScrollbarWidth.js#L21

[m7kvqbe1]

Does anyone know of an alternative library that does play nice with Firefox?

[unematiii]

@m7kvqbe1 I'm using simplebar react.