RobPethick / react-custom-scrollbars-2

MIT License
148 stars 56 forks source link

Native scrollbars partially showing on zoom #41

Open nabsta-eth opened 1 year ago

nabsta-eth commented 1 year ago

Great product, but we had to stop using it in some key places in our live app for the reason below. I'd like to reinstate it evrywhere because I personally hate the native scroll bars and like to make them consistent wi the app theme and consistent across all desktop platforms.

We are/were using v4.5.0.

When zooming out, the native scrollbars are just showing at some percentages (not all). Both vertical and horizontal show when this is the case because the calculation of the negative margins must be slightly off. image

Hopefully it is a reltively quick/easy fix.

Regards David

nabsta-eth commented 1 year ago

Sorry, forgot to mention. This is Chrome. Actually, here's a situation where the content required no horizontal scrollbar but does have a vertical one, but we still see a white remnant and the vertical is correct. This is at 80% zoom. margin-bottom: -22px is needed instead of the set -21px, but the margin-right: -21px as set is fine... Even -21.5px it's happy with... It seems to depend on the screen resolution. Lower res monitors (e.g. my HP 25x) have the issue where full HD (e.g. my Dell XPS 15 laptop screen) does not. image

pipje2001 commented 1 year ago

I just ran into the same issue, but I don't know if this is easy to fix, after some testing it does show that the normal scrollbar is 15px wide (default for my browser) and thus the custom scrollbars has a margin of 15px but still it shows this small line. After looking at the internal code of react-custom-scrollbars-2 it calculated the width of the scrollbar exactly the same way as I did.

So I dont think this is a issue with react-custom-scrollbars-2 but rather a html render issue that either: makes the default scrollbar just slightly bigger OR makes the negative margin slightly smaller