Chrome: Default scrollbar on some screen-sizes is not hidden correctly

[Danilqa]

If I customize default scrollbar by "::-webkit-scrollbar", I'll get this:

Unforeseen shifting to right.

[RoboQuasar]

Have the same problem

I can resolve it by using attribute like this : renderView={({ style, ...props }) => <div {...props} style={{ ...style, marginBottom: '-16px' }} />}

, but i suppose, that a not universal decision

[OscarCanek]

I have the same problem with Chrome

How I can fix that?

[OscarCanek]

Any update on this?

[ev01ve]

I'm seeing this problem in Chrome too.

[tungvn]

I see this problem too. But I can resolve this issue by using:

renderView={({ style, ...props }) => <div {...props} style={{ ...style, marginRight: '-18px' }} />}

I think in some specific cases, the width or height of scrollbar could not be calculated truthly and it made our problems.

[mustofa-binary]

have the same problem in chrome, @tungvn renderview is a props inside scrollbar?

[tungvn]

have the same problem in chrome, @tungvn renderview is a props inside scrollbar?

Yes. See the documentation at https://github.com/malte-wessel/react-custom-scrollbars#usage

[mustofa-binary]

@tungvn thank you, it works for me on windows chrome, however, on mac, there is no scrollbar shown at all. i think PR is needed to fix this

[tungvn]

@mustofa-binary I am really not sure the problem is, so I think just treat like that first

[Nichon4]

I have met same problem. as i see, this happen when in os setted option "Make everything bigger". default scroll width(17px) has problems with round after zoom. when i set global scrollbar width to 20px it fix the problem.

upd: function getScrollbarWidth() calculate scrollbar width by creating div in document root. if you reassign scrollbar width somewhere in your app, react-custom-scrollbars won't know about it.