Revision as of 03:26, 9 May 2012 by hamishwillee (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Mobile Design Pattern: Scrollbar

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Created: croozeus (31 May 2009)
Last edited: hamishwillee (09 May 2012)

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
This page was last modified on 9 May 2012, at 03:26.
83 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.