Scrolling up on mobile, but getting stuck on a scrollable list

Question

Simple task: a user needs to scroll to the bottom of a form, before the bottom there's a scrollable list that is as wide as the form itself.

When the user arrives at this list, it stops scrolling the form and instead starts scrolling the list (the list takes focus).

What's a good workaround for this behavior?

Answer 1

Well... The obvious answer is to not do that.

So (1) display the list as a non-scrollable element and/or (2) don't make it the full width of the screen.

Answer 2

A simple solution would be to ensure the height of your list box is not greater than the height of the device. For example, the light grey spaces would still scroll the entire window instead of just the list.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 3

Scrollable list inside a scrollable conatainer is a no go on Mobile.

If you really have a reason not to show the whole list (this has to be a strong reason) you have options like:

• show the first few items an than place a CTA "show all" which would expand the list to its full length
• show the list title (maybe with the number of items) and hide the list in an accordion