Scroll

Scroll is a container whose content can be larger than its box. The overflow scrolls by mouse wheel, trackpad or scrollbar.

Light

Dark

ScrollLive preview soon

Scrolling content

A scroll works like a Container, with a size that limits it:

Scroll {
    height = 240_px,
    flex_direction = Direction::Column,
    gap = 4_px,

    For(state.layers, [](const Layer& layer) {
        return Text { layer.name };
    }),
}

Content scrolls vertically by default. scroll_axes allows horizontal scrolling, or both directions:

Scroll { scroll_axes = ScrollAxes::Both, ... }

Position

The scroll position is kept for as long as the view is on screen, and on_scroll reports it whenever it changes. A scroll_offset moves the content whenever its value changes, so keeping the offset in state lets any handler move it:

Scroll {
    scroll_offset = state.offset,
    on_scroll = [](const ScrollEvent& scroll, State& state) {
        state.offset = scroll.offset;
    },
    ...
}

Setting state.offset to Vec2 { 0.f, 0.f } in a handler, such as a "Back to top" button, then scrolls to the top.

Scrollbar

The scrollbar's thumb and track each take a block of style props:

Scroll {
    thumb = { background_color = Color::GRAY, corner_radius = CornerRadius::all(3.f) },
    track = { background_color = Color::TRANSPARENT },
    ...
}