• Skip to main content
  • Select language
  • Skip to search
MDN Web Docs
  • Technologies
    • HTML
    • CSS
    • JavaScript
    • Graphics
    • HTTP
    • APIs / DOM
    • WebExtensions
    • MathML
  • References & Guides
    • Learn web development
    • Tutorials
    • References
    • Developer Guides
    • Accessibility
    • Game development
    • ...more docs
B2G OS
  1. MDN
  2. Archive of obsolete content
  3. B2G OS
  4. Firefox OS apps
  5. Firefox OS Building Blocks
  6. Scrolling

Scrolling

In This Article
  1. Notes
  2. Interaction
  3. Implementation guides

This article describes the implementation and possible interactions with the scroll bar.Scrolling areas allow the user move text and/or images across the device's display.

Notes

A scrollbar (A) may be oriented either horizontally or vertically on the screen and automatically displayed on the right-hand side for vertical scrolling or bottom for horizontal.

The scrollbar is an indicator only and cannot be used as a control handle.

An index scrollbar (B) is always displayed on the right side of the screen and is always visible regardless of whether the user is scrolling the content or not.

An indexed scrollbar is used for alphabetically ordered lists such as contacts or music.

If the user starts scrolling directly over the component the system will switch to a “fast scrolling mode” making it possible to quickly jump to the selected letter.

Interaction

To scroll directly to a specific group, the user taps on the corresponding letter or number on the index scrollbar.

To scroll to a specific index group, the user can drag their finger up or down over the index scrollbar and release when they reach the desired group.

The user released on H and was taken to the H group.

Implementation guides

  • Scrolling 2.0 implementation
  • Scrolling 1.x implementation

Document Tags and Contributors

Tags: 
  • B2G
  • building blocks
  • Design
  • Firefox OS
  • Gaia
  • scrolling
 Contributors to this page: chrisdavidmills, sidgan, chrisdavidmills-github
 Last updated by: chrisdavidmills, Feb 27, 2017, 2:57:31 AM