What's the best way to show you can scroll on mobile devices?

  • I'm trying to find the best method of showing users on mobile devices that they can scroll in a <div>.

    As iPhones/iPads don't have scrollbars, I will need an indicator to show that you can scroll. This should be subtle but present the idea well.

    Is this question the sort of thing you're looking for?

    @JonW Well unlike with that question I am certain I want to use scrollable elements due to the nature of the webapp. But I'm more talking about the actual design to try to invoke users into scrolling. I'm fairly new to the StackExchange so I hope this is the correct place for this sort of question.

  • Padrig

    Padrig Correct answer

    9 years ago

    These are the general recommendations I could find. This is what is done in Apple products (Mac OS X, and I believe iOS too) but also partly on Android:

    • Scrollbars appear for a brief moment when the scrollable panel is first made visible and then they disappear.
    • When the user touches the scrollable content, the scrollbars appear until the user removes his finger(s).
    • While scrolling, the scrollbar is shown. If the content is 'thrown', the scrollbar remains until there is no more inertia.
    • Also, just touching the scrollable content should slightly move the content to show that it is scrollable.
    • Make it in such a way that some piece of content is partially visible (for example, only the top part of line of text visible, or part of an image, etc.), just as explained in the other posts.

    You might take a look at the book Brave NUI World which gives some great dos and don'ts on natural user interfaces. This question is one of the points dealt in this book.

    Additionally, you may also look at the list of labels in Gmail and feeds in Google Reader. The top and bottom borders of the scrollable list drops some shadow over the scrollable content, suggesting the the border is "on top" of something and there is more to read. Something like this:

    Google Reader

    Alternatively, you may also fade out the scrolled content at the top and bottom instead of using the shadow. I do not remember where I have seen it, but I will look for it again.

    Thanks! I think I will use the shadow option as shown in the image.

    Youtube adopted the faded content on the "Read More" area a few years ago. Probably not the first to adopt the practice but certainly not the last.

    If anyone needs to see a live example of using a shadow to indicate a scrolling table like the one Padrig mentions above, there is an example on CodePen: http://codepen.io/dbushell/full/8e6a1ee85418f3c5abe839647dbcdec5/

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM