Scrollbar won't show on MacBook unless mouse is connected

[randomdevpete]

For some reason on a 2017 MacBook pro, the custom scrollbar never appears and I get native scrollbar instead.

However if I plug in a USB mouse and refresh the page then the scrollbar works.

[randomdevpete]

If you need more information or this is hard to reproduce let me know, but have observed this on several computers now.

Suspect it is to do with the trackpad confusing the component into thinking that this is a touch environment?

[oleg-webdev]

Confirm - doesn't work on macbook pro

[sv1809]

Doesn't work on MacOs High Sierra. Checked on iMac 21 and iMac 27.

[joetidee]

I have the same issue. Using v4.2.1 on a Macbook Pro (Retina, mid 2012) with OS High Sierra 10.13.2

When I use the trackpad, the scrollbar:

1. is invisible before scrolling.
2. it eventually appears when scrolling (but there is a delay)
3. the thumb appears as a thin, dark grey scrollbar and any styles I have set using renderThumbVertical are ignored.
4. When I stop scrolling the scrollbar disappears after about 2 seconds.
5. If i quickly mouseover the scrollbar after it appears, the native Macbook scroll bar show momentarily, before fading out.

My component is as follows:

<Scrollbars
        renderThumbVertical={({ style, ...props }) =>
            <div {...props} style={{
                ...style,
                backgroundColor: '#bbb',
                borderRadius: '4px',
                cursor: 'pointer',
                width: '9px',
            }}/>
        }
        >
        {children}
</Scrollbars>

[caesarsol]

The thin grey scrollbar you are observing is the native scrollbar of the browser, probably cropped by the technique used to hide the normal grey bars (which is margin-left: -15px).

What I know is that if the user has this configuration in Mac OS X System Preferences -> General, the issue disappears:

I am looking for a way to overcome this issue, I could make a PR if I find one.

[sv1809]

https://github.com/malte-wessel/react-custom-scrollbars/pull/206 this PR fix this issue, but it looks like the author abandoned the library

[MuYunyun]

#206 this PR fix this issue, but it looks like the author abandoned the library

It's sadly this way can't remove or hide native scrollbar totally. It appears again when I click the scrollbar track.

and my solve way is to add attributes as follows as well:

/*FireFox*/
scrollbarWidth: 'none',

/*IE10+*/
'-ms-overflow-style': '-ms-autohiding-scrollbar',

/*others*/
'& *::-webkit-scrollbar': {
  display: 'none'
}

If so, it covers 90%+ browsers, except Firefox down 63. compatibility