So I am using this plugin tool https://kingsora.github.io/OverlayScrollbars/ to add a custom overlay scroll bar to my site. The reason being is to take the gutter away from the default scrollbar to not cause interference with some of my other elements. That goal was accomplished and it looks great but I noticed in mobile view on my Android phone it is present along with the default gray scrollbar that disappears after a moment when not scrolling and is present on every site I browse on my phone. This gray scrollbar is also present when I go into dev tools on my desktop and toggle the device toolbar to see at mobile view. Basically, the problem is that I have two scrollbars on mobile and I think it looks bad and would like to remove the custom one when the gray one becomes active.
I have not shared code or anything because it is really straightforward what I have done to set it up and I have not done any custom tweaks to it. The link I sent contains the instructions and all I have done is attached the style sheet and script for the plug-in to my page, and then I have added to my own script the default variable it listed in the steps
var {
OverlayScrollbars,
ScrollbarsHidingPlugin,
SizeObserverPlugin,
ClickScrollPlugin
} = OverlayScrollbarsGlobal;
and then after that, I added another line to my script which initializes the plug-in onto the element that I want it on, which in this case is the body so
const osInstance = OverlayScrollbars(document.body, {});