I am currently attempting to style the overflow on a div surrounding a table, I am using the webkit specific style to do this
.overflow::-webkit-scrollbar {
width:30px;
}
.overflow::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 15px;
border-radius: 15px;
}
.overflow::-webkit-scrollbar-thumb {
-webkit-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
background:#f00;
}
These work great on the desktop browsers however don’t work on the mobile ones.
Is the issue that the mobile browsers simply don’t support doing this? Or will support be introduced in the near future?
I’ve seen a few Javascript based solutions but these all add a little bit too much bloat to simply style a scrollbar in webkit based browsers.
You can’t style the native scrollbar on mobile, and I doubt you ever will be able to, sorry.
I can’t say why with any authority, but all phones and OS’s use different browsers and each one will have it’s own implementation of the scroll bar. A lot have taken iOS’s fading scrollbar approach too, which means there isn’t much point styling it anyway.
This does limit you to using a custom solution really.