'Scrolling divs' in mobile land. Yea or nay?

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?

  
  

Answer

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.