Response title
This is preview!
Move this topic
Creating a responsive app with scrollbars for all viewports
in jQuery Mobile
•
8 years ago
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?
Thus far, I tried the Nicescroll jQuery plugin.
And used the code for a responsive app here .
Have a look and tell me if a) I am using the right tool and b) this is the expected professional approach.
Thanks in advance.
Thus far, I tried the Nicescroll jQuery plugin.
And used the code for a responsive app here .
Have a look and tell me if a) I am using the right tool and b) this is the expected professional approach.
Thanks in advance.
1
Replies(4)
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.
Leave a comment on watusiware's reply
Admittedly, this is an edge case:
- Mobile browsers do not normally display permanent scrollbars so the problem is never apparent on those devices.
- A desktop browser user would be unlucky to have window dimensions set at a point where layouts noticeably changed.
- You could
prevent Chrome switching layouts by ensuring the vertical scrollbar
is always visible, i.e.
body { overflow-y: scroll; }.
Leave a comment on nguyenthanhcong19992's reply
Have not tried on an iPad so thanks for the heads up.
Response to using Nicescroll were good on LinkedIn.
I will look at your jquery .moible.iscrollview widget.
Response to using Nicescroll were good on LinkedIn.
I will look at your jquery .moible.iscrollview widget.
Leave a comment on stevedev's reply
Unfortunately, "native" styles change over time, as well.
Android scrollbars used to be "permanent". Now, they
fade, like iOS scrollbars. Details of style change, too - radii,
colors, shadow, gradients, etc. etc.
So, it can get messy.
I think this is one thing, though, that will immediately tip a user
that an app is not native, and that can create a negative reaction.
So, if practical I think it's good to match native style.
I think users would be more accepting if scrollbar differences are
a harmonious part of a completely different, application-specific
design that clearly does not look like any popular native interface.
jquery.mobile.iscrollview is just a jQuery Mobile widget that wraps
iScroll4. iScroll4 does the real work - my widget makes it easier to
use in JQM projects.
I am doing a major rewrite of jquery.mobile.iscrollview this month
to work with iScroll5. For one, it will be two widgets, a scrollview
widget and a scrollview page widget.
I know Mateo is working on iscroll6 and I will suggest the idea of
making the scrollbar a separate, replaceable piece.
I think iScroll is still very useful, even though now most browsers
have overview-scrolling:touch.
iScroll5 will use that feature if it is available in the browser, for
better performance. But it also brings many features that are not
possible simply using only CSS.
Leave a comment on watusiware's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to stevedev's question
Statistics
- 4 Replies
- 2652 Views
- 0 Followers