Hide custom css scrollbar in only mobile?

Question

I'm not sure whether this is possible, but using webkit I made a custom scrollbar that doesn't show up on mobile, so there is a gap on the right side of the screen where it should be (instead, the default chrome one appears). It shows up perfectly fine on desktop.

Is there anyway of:
a) making this scrollbar show up on chrome mobile browser.
b) hiding the custom scrollbar on mobile only, so the gap doesn't appear, but also allowing the custom scrollbar to show on desktop simultaneously.

::-webkit-scrollbar-thumb {
width:5px;
background-color:black;
}
 
::-webkit-scrollbar {
width:5px;
background-color:white;
}

::-webkit-scrollbar-track {
    border-radius: 5px; 
    background-color: white; 
}

Answer 1

If you don't want to use JS, and want to support tablets as well, you can check whether the device supports hovering using a media query.

@media (hover: hover) {
  *::-webkit-scrollbar { /*custom styles*/ }
  *::-webkit-scrollbar-track { /*custom styles*/ }
  *::-webkit-scrollbar-thumb { /*custom styles*/ }
  *::-webkit-scrollbar-thumb:hover { /*custom styles*/ } 
}

(That way you don't have to set an arbitrary max-device-width threshold.)

Hovering in that context means convenient hovering. Some mobiles and tablets support rudimentary hovering by a long touch, but those don't count:

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover#none