Provide a way to access data when the context extends beyond the length of the screen


Use gestures to slide to the top or bottom of the screen in case of portrait view and slide left and right in case of landscape view of the screen.
It is used when the content being accessed exceeds the size of the screen. It is usually associated with other list controls like menu, lists, submenus, etc. to access the content in it's entirety.

How to Use

Scolling is supported by gestures like flicking and panning. Teaser text /incomplete text is shown to indicate that there is more text available to view via scrolling.
Support inertia scrolling where the user can flick the screen and depending on the speed of the flick, the screen can scroll accordingly.
Tapping on area of the screen should bring focus to that area, which is a kind of interactive scrolling.

Here you can scroll up and down by panning the screen.

Here the user needs to flick down on the screen to get to the bottom of the page. The teaser text indicates that there is more information at the bottom to be viewed.


  • Only allow items that are currently under focus to scroll.
  • When scrollbars are used , it is almost always best to not allow the scrollbar itself to be directly manipulated , instead, the entire page should be scrollable by gestural movement.
  • Scroll bars should be used more as indicators that there is more information to access and can be accessed via gestures, rather than actually making the scroll bar itself actionalble on a small screen mobile device.
  • Indicate the end of the scrollable area by making sure that scrolling is not made possible beyond it, to make the users more situationally aware.
  • Avoid multi-axis scrolling as it is difficult to use on a small screen.