Picchu

Scrollers

Guidance

Scrollers help reinforce one's current location, indicate additional content beyond view, and allow scrolling within a specific component as needed.

While browser window scrollers maintain default browser styling, component-level scrollers should be stylized according to these guidelines.

The scroller display mode (scroll indicator vs. scroll bar) is dependent on the input device detected.

Scroll bars

  • Appear when mouse, touchpad, keyboard, and/or stylus is the input device detected.

Scroll indicators

  • Appear when touch is the input device detected.
  • Fade in only during manipulation.

Demo

See the Pen Scrollers Demo by Microsoft.com (@microsoft) on CodePen.

Resources