I'm the author of jquery.moible.iscrollview, which is a JQM widget
that wraps iScroll4. It solves a different problem (sub-page scrolling)
but has a built-in scrollbar implementation. And, so, I'd never
really though about scroll bars as a separate component.
I think it's a good idea, though, and will suggest to Mateo
that he consider making it a separate component for iScroll6.
How are folks here using jQuery Mobile to gain a consistent
look & feel for scrollable containers to look exactly the
same across all devices and browsers?
There
are two camps, in general, on mobile app design.
1.
It should look the same across all platforms
2.
It should look native on each platform
It depends on the app. I'm
generally in camp 1, except for things like scrollbars. I think
that common UI elements should look native. Give users what they
are accustomed to, don't make them learn something else. On
the other hand, your custom list should look like your custom
list, and shouldn't look different on different platforms.
In fact, I tried the demo above
on an iPad. The scrollbar doesn't look anything like I would
expect a scrollbar to look like on an iPad. An iPad scrollbar is
not blue. An iPad scrollbar fades after you scroll. Maybe iOS
users will tolerate blue scrollbars. If scrollbars don't
fade, they will probably report a bug!
Using a scrollbar plugin, in
any case, gives you a choice.
I think the main
interest here would be for adding a scrollbar when using
overflow-y:
touch
. That gives native
sub-page scrolling, but no scroll bars. So, with this plugin one
could presumably use
overflow-y:touch
and add a
native-looking disappearing scrollbar.
If you are writing a
PhoneGap app, (so, you know your browser supports
overflow-y:touch -
at least for most platforms
) this can be a good
approach. Otherwise, though, for a website, you don't know
if the device supports it or not, and then you do need a
scrolling library like iScroll, ftScroller, etc. to support on
devices that don't have it.