Scroll Bars

A scroll bar indicates the current position on a page as users scroll through with a rotary action or a swipe.

Usage

Use a scroll bar for text that does not fit on one screen.

Behavior

  • Visual interaction

    A scroll bar appears when users first access a page and disappears shortly after. It reappears when users scroll the screen.

  • Fast scroll

    A screen scrolls more quickly when users flick the screen. The scrolling speed is proportional to the speed of the gesture.

Type

  • Vertical scroll bar

    Use a vertical scroll bar when a page scrolls up and down. It forms an arc of 90 degrees on the right side of the screen.

    Vertical scroll bar in developer's guides

    Native

    Circle Scroller > vertical

    Web

    -

    * Automatically applied unless otherwise defined.

    Use a vertical scroll bar when a page scrolls vertically.

  • Horizontal scroll bar

    Use a horizontal scroll bar when a page scrolls right and left. It forms an arc of 90 degrees at the top of the screen.

    Horizontal scroll bar in developer's guides

    Native

    Circle Scroller > horizontal

    Web

    -

    * Automatically applied unless otherwise defined.

    Use a horizontal scroll bar when a page scrolls horizontally.

  • Fast scroll index

    A fast scroll index allows users to jump directly to the previous or next group index in a list.

    Fast scroll index in developer's guides

    Native

    -

    Web

    Circular index scroll bar

    • Fast rotary action

      A fast scroll index allows users to move directly to the previous or next group index. Only display the first letter of the index title in the center of the screen when users move to a new group index with a rotary action.

      Fast scroll indexes only respond to a quick rotary action. When users rotate the bezel slowly or swipe the screen, the list scrolls.

    • Rotary action on fast scroll index

      Once fast scroll indexes are displayed, users can jump to the previous/next group index by rotating the bezel slowly.

                        

Fast scroll indexes appear when users rotate the bezel quickly in a list presented with indexes.