Seeing double scrollbars (Overlay + native)

[gem0303]

We are trying to use OverlayScrollbars for an online training course that uses a bunch of absolutely positioned divs stacked on top of each other. It works great on desktop, but on both iPhone and Android phones we are seeing double scrollbars.

I made a very reduced testcase on Codepen but so far have not managed to repro the bug. (edit 8/15 -- realized this is actually showing double scrollbars on mobile if you view it outside of an iframe). I plan to keep merging in code but the courses are a fairly complicated setup and I'm not really sure what to try next. I was hoping you had some thoughts on what could be causing the double scrollbars to help me track down the problematic code. Thank you!

[KingSora]

Good day @gem0303 :)

You can send me the url to your full project as well (if thats something you want). I can then try to debug it myself

[KingSora]

I'm not able to find it, sorry.. please send it again with a distinct title

[gem0303]

Sent a new email with subject "Github issue for Seeing double scrollbars (Overlay + native)".

[KingSora]

@gem0303 it seems like the native scrollbar styling works differently on mobile... I'm working on a possible solution, but I can't promise you this is solvable. To solve it you could initialize the plugin like:

OverlayScrollbars({ 
  target: document.body,
  cancel: {
   nativeScrollbarsOverlaid: true,
 }
}, { });

Which will cancel the initialization if the native scrollbars are already overlaid on the system.

Version 1.x works there but just because its taking away browser functions on mobile (like pull to refresh and the functionality of hiding the URL bar if you scroll down)

[gem0303]

@KingSora Good news, I appear to have gotten around this issue by changing the structure of my setup a bit. I now have the body height locked at 100dvh and am initializing Overlay Scrollbars on #main_wrapper instead of body. Works great on desktop, iPhone and Android so far. I'll email you a link to the new test case if you want to check it out.

We didn't want to go the route of canceling initialization of Overylay Scrollbars when native was available since there's a lot of code hooked up to it, and wanted to avoid potential future bugs where things worked differently on mobile versus desktop.

[KingSora]

@gem0303 I'm glad to hear you found something that works :)

What you did is (more or less) the concept that v1 of OverlayScrollbars uses for the initialization to the body element. The drawback here is that on mobile you'll lose some functionality like "pull to refresh" or that the URL bar disappears automatically when you scroll down. Thats why I've moved away from that in v2.

We didn't want to go the route of canceling initialization of Overylay Scrollbars when native was available since there's a lot of code hooked up to it, and wanted to avoid potential future bugs where things worked differently on mobile versus desktop.

In this case you could use the showNativeOverlaidScrollbars option. Its here for exactly this reason. With it OverlayScrollbars still initializes, all the elements are here and working, but the scrollbars and its updates are "disabled".