Native scrollbars partially showing on zoom #41

Activity

1. nabsta-eth

   changed the title [-]Native scrollbars partially showing[/-] [+]Native scrollbars partially showing on zoom[/+] on Jan 4, 2023
2. nabsta-eth commented on Jan 4, 2023

   

   nabsta-eth

   on Jan 4, 2023

   Last edited by nabsta-eth

   Author

   More actions

   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.
   
3. pipje2001 commented on May 2, 2023

   

   pipje2001

   on May 2, 2023

   More actions

   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
4. comerc commented on Sep 11, 2025

   

   comerc

   on Sep 11, 2025

   More actions

   Could you please demonstrate the issue in a sandbox environment (like CodeSandbox, StackBlitz, or CodePen)?
5. molp commented on Oct 21, 2026

   

   molp

   on Oct 21, 2026

   More actions

   I was able to circumvent this issue by hiding the browser's own scrollbars with CSS in the encapsulating div:

     margin-right: 0 !important;
     margin-bottom: 0 !important;
     scrollbar-width: none;
   
     &::-webkit-scrollbar {
       display: none;
     }