16

An interesting problem/challenge came up this week where some mobile designs requested a part of the screen be scrollable. This is quite common on desktop sites--typically a little scrolling box for news items, or inside a web app perhaps a scrollable table and the like.

I'm not a huge fan of them, but fine, whatever, let's get it working on mobile. The typical 'native' CSS way to handle this is to give a div a CSS property of overflow: scroll and the scroll bars appear. Fine.

Alas, in the mobile space, there are some issues. What I've found thus far:

Android Devices:

  • most can't scroll the content in the div at all
  • some (specifically Mobile Firefox) can scroll the content with one finger
  • in either case, no scrollbars appear (offering no affordance)

iOS Devices:

  • can scroll the content with a two-finger swipe
  • iOS5 will make this a one-finger swipe
  • no scrollbars appear (offering no affordance)

BB OS6 devices:

  • touch devices can scroll 1 finger
  • keyboard devices can't
  • no scrollbars appear (offering no affordance)

Based on the simple fact that scrollbars appear on none of these devices, implying that you SHOULD scroll, I'd say the native option is a bad recommendation.

That said, there are JavaScript options. One that seems decent for touch devices is iScroll:

http://cubiq.org/iscroll-4

Unfortunately, it doesn't show scrollbars by default either, but does show them when you are scrolling. It enables one-finger scrolling on touch devices.

Alas, that still leaves keyboard users stuck. There are some options out there I've seen that add up/down clickable arrows to scroll the DIV via JS. Ugly, but works.

So, my questions:

  • Does anyone have data/research/user testing saying if scrolling areas of a page are a good or bad thing on mobile devices (as you can guess, I lean towards the 'bad' side, but am certainly open to data either way).

  • Has anyone had to implement such a pattern and, if so, have you found a UX pattern for this that appeased both touch and keyboard interactions?

Improve this question
3
  • How big is the div, compared to the device? I can see users getting frustrated, especially if the div is large.
    – Emil
    Commented Sep 30, 2011 at 16:56
  • Good point. In this situation, it's actually a pretty big target. It's a an almost full-screen modal (I'll save the debate on whether or not modals make sense in mobile land for another day ;)
    – DA01
    Commented Sep 30, 2011 at 17:00
  • 3
    Scrolling on touch is supposed to feel like dragging the whole page up and down. Even if it did work it's going to be awkward to have one little section do it, rather than the whole page like one expects. Since it often doesn't work it seems like that's even more important. It sounds like they want something flashy that's just not practical.
    – Zelda
    Commented Sep 30, 2011 at 18:32

2 Answers 2

Reset to default
4

The issue is not so much that the ux is good or bad, but that implementing it cross platform is more trouble than it is worth in most cases - a mobile screen will usually only have room for one scrolling div, which makes it similar to the regular scrolling page you get with no effort.

There is at least one good reason to use a scrolling div in a mobile app though - fixed headers/footers. It's something you see in native apps a lot (i.e. normal/good ux), but the mobile browsers don't support it well yet and a scrollable div under absolute positioned non-scrolling elements is the only thing that works.

Using javascript and css it is possible to catch all the events you need to implement scrolling, including keyboard events, but even with a plugin there will be a lot of effort to get it working right.

Improve this answer
2

We should avoid scrolling divs in Mobile web; however, if you really want to have scrolling area within the page you may want to use up/down or left right arrows.

enter image description here

enter image description here

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.