Revision as of 08:33, 27 May 2011 by hamishwillee (Talk | contribs)

Mobile Design Pattern: Scrollbar

From Nokia Developer Wiki
Jump to: navigation, search

This design pattern is part of the Mobile Design Patterns series.

According to the Wikipedia: "A scrollbar is a graphical object in a GUI with which continuous text, pictures or anything else can be scrolled including time in video applications, i.e., viewed even if it does not fit into the space in a computer display, window, or view port."


Scrollbars are components/tools for scrolling or sliding content on the screen. The default or the built-in scrollbars are the conventional long rectangular scrollbars, preferably used with contrasting colors. However, today with many innovative design patters flowing out, there are varieties of scrollbar designs available. A use of good scrollbar makes the application have a more attractive user interface.

  • Long rectangular scrollbar - Conventional scrollbar


  • Showing arrows at top and bottom of the screen


  • Showing arrows at the bottom of the screen


  • Using a slider as a scrollbar


Allow other scrolling options

  • Allow scrolling by arrow, volume or any other shortcut keys.
  • Allow scrolling by the navigation wheels.
  • Allow scrolling by dragging the screen - for touch enabled devices.
Devoid of scrollbars
  • When scrollbar is not used but scrolling is allowed with up and down arrow keys (or any other keys) - the application fails to indicate the end of content to the end-user.

--Submitted by croozeus 07:39, 31 May 2009 (EEST)

  • croozeus
102 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.


Thank you!

We appreciate your feedback.