With android, and I think probably Mobile Safari, scrollbars aren’t shown on scrollable divs unless you attempt to scroll the div, at which point they temporarily appear to show you your current scroll position.
I don’t use mobile devices much, so to me this behaviour is not very user friendly - it’s not obvious that the div is scrollable, and the overflowing content just appears to be cut off. (I noticed this when checking a Google maps page and the content in an info bubble appeared to be cut off at the bottom).
Looking at some of the comments in this bug report, it appears there are some hacks that can be done to force display of scrollbars. But, if no scrollbars is the default for mobile browsers, then maybe it would be obvious to most users that they can scroll the div?
What do you think?
See if you can avoid them in the first place: http://baymard.com/blog/inline-scroll-areas
Otherwise, I’ve heard of people making fake scrollbars out of divs. I believe iScroll does this.
There are currently also accessibility/keyboard issues with scrolling inline areas, namely that the W3C is considering making those scrollable divs receive a sort of focus and a way to tell the OS/UA/AT layers that they are within a scrollable area… if such a thing became a spec or was implemented (Mozilla might have already), then that interface might also give Javascript something to latch onto on mobile as well.
Thanks for the link, that was quite good reading. Unfortunately the solutions it presents (in the follow-up article) are only really suited to lists (and I can’t think of a way even that could be done in a responsive fashion without js).
It does mention that users do have problems with the lack of visible scrollbars in scrollable content though, which confirms my original thought.
Thinking particularly of scrollable content that overlays the rest of the page in a ‘lightbox’ style (e.g. an info bubble on a map), I wonder if a solution would be to ensure that the overlaid content fills up the full screen? If users are used to being able to scroll a webpage that fills the screen when no scrollbars are shown, then maybe an overlay that fills the screen would trigger the same behaviour? A possible negative could be that the user might then try and use the back button to get back to the page from the overlay.
^ lightboxes are just as challenging on small screens, while you can use some lightboxes “full screen” that are still very fiddly to use on a 4inch device.
I’d suggest that it’s worth investigating better ways of displaying content on small devices, accordions (or show/hide/toggle) can work fine so worth considering…
But for certain types of page, such as a map or game, then I don’t think there really is any alternative to a lightbox?