Scroll area

Scroll Area wraps Mob's native Scroll, so the platform supplies momentum, overscroll, rubber banding and the scrollbar. The web component exists mainly to replace the browser scrollbar with a styled one. A phone has nothing to replace, and a hand-drawn scrollbar would be worse than the real one.

A scroll area needs a bound. Content scrolls only when the viewport is smaller than it, so a vertical scroll area inside a page that already scrolls needs a height. Without one it grows to fit its content and never scrolls. The showcase app always sets height.

The Scroll itself takes no size or decoration. With no height, background, padding or corner_radius, Scroll Area is a single Scroll node. Otherwise it is a Box with fill_width around the Scroll.

Scroll Area keeps no state and sends no events, because the native view owns the scroll position. An id registers the native scroll view so a screen can move it without a finger. See MishkaScroller.nudge/3 on the Mob Scroller page, which is what the scroller arrows call.

Run this from your Mob app's root to add the component to lib/<app>/components/:

mix mishka.ui.gen.mob scroll_area

The generator registers the <ScrollArea> tag so you can use it in ~MOB markup. The examples on this page use the mishka_ prefix of the showcase app (--module-prefix mishka_), so the tag is <MishkaScrollArea>. Without a prefix the tag is <ScrollArea>.

height bounds the viewport. Without it, nothing scrolls. The showcase app also sets a raised background, rounded corners and padding on the area.

Vertical scroll area

LTR RTL

Preview

Show the whole example Show less

<MishkaScrollArea height={200} background={:surface_raised}>{rows()}</MishkaScrollArea>

orientation: :horizontal scrolls a wide row. Flick sideways to move through the tiles.

Horizontal scroll area

LTR RTL

Preview

Show the whole example Show less

<MishkaScrollArea orientation={:horizontal}>{wide_row()}</MishkaScrollArea>

With no height or styling, Scroll Area is a single Scroll node. In the showcase app, a box 120 dp tall around it supplies the bound.

Scroll area without props

LTR RTL

Preview

Show the whole example Show less

<MishkaScrollArea>{content}</MishkaScrollArea>

• orientation: "both" is not ported. Compose's Scroll scrolls one axis, and two-axis content needs a horizontal scroller nested inside a vertical one. You write that nesting yourself. The web component's third value is dropped so it never silently behaves like :vertical.
• The *_class attributes are not ported, because they style a scrollbar that the platform owns.

• Headless Scroll Area, the web component this one ports.
• Mob Scroller, a horizontal rail of items with previous and next controls.
• Mob Marquee, a horizontal rail built on this component.
• Mob Splitter, two panes with a draggable divider.
• Mob components, the full list of native components.