Can't get scrollbar to show on mobile browsers

Hi there,
I added some custom code to a new webflow project I am working on to get a custom scrollbar to always be visible, and have custom colors. It works great on desktop when switched to the tablet/mobile view as you can see in this screenshot:

But when viewing the site on a mobile browser, the scroll bar does not show up at all unless scrolled, as you can see in this screenshot:

Can anyone lend a hand and let me know what can be done about this?

Here’s the custom code I used:

.scroller::-webkit-scrollbar {
-webkit-appearance: none !important;
}

.scroller::-webkit-scrollbar:horizontal {
height:8px !important;
}

.scroller::-webkit-scrollbar:vertical {
width:0px !important;
}

/*track*/
.scroller::-webkit-scrollbar-track {
background:rgb(236, 234, 252) !important;
border-radius:40px !important;
margin:0px 24px !important;
}
/*thumb*/
.scroller::-webkit-scrollbar-thumb {
background:rgb(62, 59, 220) !important;
border-radius:40px !important;
margin:0px 24px !important;
}
</style>

Here is my site Read-Only: LINK
([how to share your site Read-Only link][2])