components/scrollarea
레이아웃과 대용량 데이터 · 50 / 64

ScrollArea

ui.widgets.mountScrollArea

직접 그리는 스크롤, 스크롤바, 프로그래밍 방식 위치 지정.

BEHAVIOR CONTRACT

wheel / trackpad, clamp, momentum, scrollbar, scrollIntoView, 픽셀 정렬이 state를 공유합니다.

RECORDED INTERACTION

harness가 콘텐츠 영역을 스크롤하고 thumb의 이동을 녹화합니다.

examples/storybook/stories.zig:2986
// ── ScrollArea ──
pub fn buildScrollArea(scope: *ui.Scope, cx: *ui.Cx) anyerror!*ui.Node {
    const a = cx.allocator;
    const sa = try W.mountScrollArea(.{ .width = 320, .height = 320, .direction = .vertical }, scope, cx);
    var i: usize = 0;
    while (i < 40) : (i += 1) {
        var buf: [32]u8 = undefined;
        const txt = try std.fmt.bufPrint(&buf, "Scrollable line {d}", .{i});
        try sa.content.appendChild(a, try ui.text(cx, txt, .{ .font_size = 13, .color = light.color.fg_primary }));
    }
    return sa.container;
}
GitHub에서 소스 보기examples/storybook/stories.zig:2986

Storybook에 있는 이 story의 원본 코드입니다(zenit 5f9add5+wip 2026-09-30). W는 ui.widgets이며, col / row / label은 Storybook 내부의 작은 레이아웃 헬퍼입니다.

zenit · 이중 라이선스오픈 소스 프로젝트는 GPL-3.0-only로 무료 사용할 수 있으며, 비공개 소스나 상용 제품에는 상용 라이선스가 필요합니다.작성자 연락처: zongyi.xzy#gmail.com (#을 @로 바꾸세요)zenit 5f9add5+wip 2026-09-30