ScrollArea

콘텐츠를 스크롤 가능한 뷰포트로 감싸고 디자인 시스템 스크롤바를 입히는 래퍼

ScrollArea#

아무 child 나 스크롤 가능한 뷰포트로 감싸고 슬림한 디자인 시스템 스크롤바를 입히는 래퍼입니다. 엣지를 그라데이션으로 가리는 FadeScroll 과 달리 콘텐츠를 그대로 보여주고, 오버플로는 스크롤바로만 알립니다. Flutter / Web 동일 API 입니다.

Live Preview#

Web

스크롤 항목 1 스크롤 항목 2 스크롤 항목 3 스크롤 항목 4 스크롤 항목 5 스크롤 항목 6 스크롤 항목 7 스크롤 항목 8 스크롤 항목 9 스크롤 항목 10 스크롤 항목 11 스크롤 항목 12 스크롤 항목 13 스크롤 항목 14 스크롤 항목 15 스크롤 항목 16 스크롤 항목 17 스크롤 항목 18 스크롤 항목 19 스크롤 항목 20

Flutter

Loading Flutter...

class ScrollAreaDefaultExample extends StatelessComponent {
  const ScrollAreaDefaultExample({super.key});

  @override
  Component build(BuildContext context) {
    return div(
      styles: Styles(raw: {'width': '260px'}),
      [
        ScrollArea(
          scrollAreaStyle: const CoreScrollAreaStyle(maxHeight: 180),
          child: div(
            classes: 'flex flex-col gap-${CoreSpace.scale.space8}',
            [
              for (var i = 1; i <= 20; i += 1) Text('스크롤 항목 $i').bodyMedium,
            ],
          ),
        ),
      ],
    );
  }
}

class ScrollAreaDefaultExample extends StatelessWidget {
  const ScrollAreaDefaultExample({super.key});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 260,
      child: ScrollArea(
        scrollAreaStyle: const CoreScrollAreaStyle(maxHeight: 180),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          spacing: CoreSpace.space8,
          children: [
            for (var i = 1; i <= 20; i += 1) Text('스크롤 항목 $i').bodyMedium,
          ],
        ),
      ),
    );
  }
}

사용법#

// Flutter / Web 동일
ScrollArea(
  scrollAreaStyle: const CoreScrollAreaStyle(maxHeight: 180),
  child: Column(
    children: [for (var i = 0; i < 20; i += 1) Text('Item $i')],
  ),
)

Props#

파라미터	타입	기본값	설명
`child`	`Widget` / `Component`	required	뷰포트 안에서 스크롤되는 콘텐츠
`direction`	`CoreScrollAreaDirection`	`vertical`	스크롤 축 (vertical / horizontal)
`showScrollbar`	`bool`	`true`	디자인 시스템 스크롤바 표시 여부 (`false` 면 스크롤은 되되 바는 숨김)
`scrollAreaStyle`	`CoreScrollAreaStyle?`	`null`	height·maxHeight·thumb 색/불투명도/두께·track 색 (chrome 단일 진입점)

Flutter 는 추가로 controller 를 받아 외부에서 스크롤 위치를 구동할 수 있습니다(framework-infra). Web 은 브라우저 native overflow 로 동작합니다.