Is there a way to force iOS to display a vertical scrollbar on a desired element?
I've been tearing my hair out trying to figure out why my scrollbars are disappearing, and it turns out it's an iOS thing (possible Mac too?).
The browser is automatically hiding the scrollbars, and they're only showing when I hover the element, which reeeeeeally isn't acceptable as the user needs it conveyed to them that the element is scrollable by sheer virtue of the affordance a scrollbar gives.
This also happens on a desktop browser when viewing the page in devtools as an iOS device.
I've of course tried:
and the like, but support for 'custom' scrollbars was removed from iOS.
The scrollbars work as intended on desktop as best I can figure.
Pen of the an example of the issue (need to swap to iOS or an iOS device in devtools):
https://codepen.io/emsixteen/pen/xxmMXvd
19 Replies
have you tried adding a bit more styling to the scrollbars f.e
The issue isn't how they look, only that they're gone until the user hovers the element.
and simply don't exist on touch.
well if you modify the look then the default browser styling should be overwritten and it should be visible at all times
As I mentioned, support for custom scrollbars was removed from iOS.
Unfortunately!
good job apple lmao
well if you can't modify the look you are doomed i'm afraid
That's the stage I was at and why I've come here, to seek advice from people who've tackled the same situation. 😊
your only option is to go back to 2010's and use some janky html+js+css scrollable container, which is a pretty bad idea
leave it as-is, save yourself some trouble
I can't really just leave stuff like this as-is, that affordance is really needed so if it's not baked in then I need to figure out an alternative. This is intended for low resource areas with a very broad range of IT competency, and the content revolves around life-saving training, so don't really want to open the door for more hindrances and areas of confusion.
Would actually love some advice if anyone has any.
tbf I wonder if it might be viable to check for iOS devices, and have the max-height be conditional based on that
In that case then there'd be no limit on the height of the container but at least there'd be no 'missing' scrollbar
I don't like changing a user's positon on the page on a button action, but a scroll to top of that container upon action might help
sure, it is possible but it's pretty terrible to work with stuff that tries to guess the browser
you may try the @supports block and see if you can detect support for it
Mac/iOS users are used to not seeing the scrolling bars. It works like that everywhere in the OS across all apps and makes sense. I don’t know how Android works but having the bars visible on mobile devices all the time doesn’t make any sense and just clutters the UI.
android hides the scrollbar on the side
i think that even the symbian phones (samsung) from 2010 hide the bar
I've already said that I need this affordance - that it makes sense to some, yourselves included, doesn't mean that it makes sense to all.
I'm not here to argue whether or not I need it, only to figure out how to achieve it or have some form of a workaround or alternate functionality which can communicate the same. 🙂
i told you how
i think it is a terrible idea and there is a good reason why that type of stuff should be left in the past, where it belongs
Yikes
So, basically you’re saying that a Trillion dollar company knows less in terms of UI than you do? lol
no, he's saying he wants extra affordance
I'm not even going to entertain this
It needs to be clear to users that the area is scrollable, in as simple a manner as is viable, that's what it comes down to. That's usually clear by the presence of a scrollbar, but there's no scrollbar on iOS, so need to work around that.
i would change the design so that the card isnt scrollable at all