Native scrollbar is visible on mobile view

[vakers2]

Describe the bug Native scrollbar is visible on mobile view.

Expected behavior Only native or custom visible

Examples I am using this code in my project:

    const options = {
        scrollbars: {
            theme: 'os-theme-custom',
            autoHide: 'scroll',
        },
    };
    const [initialize] = useOverlayScrollbars({ options, defer: true });

    useEffect(() => {
        initialize(document.body);
    }, [initialize]);

Also this issues exists on demo page.

Environment

• Used Operating System(s): Android, IOS
• Used Browser(s) (with version): Chrome, Safari

Additional context Not sure if I need some additional options to fix this issue

[KingSora]

@vakers2 Good day :)

I'm not observing this to be honest.. Are you able make a live example for me so I can inspect the issue in the browser? Also on mobile please make sure that you are not zoomed in, because otherwise the scrollbars will always appear (its impossible to hide those because those are not normal scrollbar but more of a possibility to move a zoomed in viewport)

[vakers2]

Hi @KingSora , if you meant that you don't observe it on demo page, then these are the steps that I used in my chrome browser:

• Start emulating mobile screen through dev console (I used Pixel 5 screen)
• Scroll down to the end of the page
• Native mobile scrollbar can be seen a bit from under the OverlayScrollbar's scrollbar

[KingSora]

@vakers2 OverlayScrollbars evaluates its environment only once when the first instance is created. Every subsequent initialization is using the already evaluated environment.

So when you change the browsers environment (which is not really possible outside of the browsers dev tools) the plugin won't know if it already initialized within the previous environment. - This means every time you start emulating a mobile screen or a different device please also refresh the page so the plugin can adapt.

Please try it again with that knowledge and report back if it still happens.

[vakers2]

I see, It works correctly on demo page then. Thank you. Do I need to use

cancel: {
   nativeScrollbarsOverlaid: true,
 }

for OverlayScrollbars to work the same way in my app?

[KingSora]

This option will force the plugin to cancel initialization in case the native system scrollbars are overlaid already. Android, iOS and macOS are systems where the system scrollbars are overlaid 99% of the time.

You can add that if you want this behavior, but you don't have to.

[vakers2]

Thank you.

[dannybeckett]

Another possible workaround is detailed in #622