Scrollbar

스크롤 영역에 테마된 스크롤바를 입히는 래퍼

Scrollbar#

스크롤 가능한 child 를 감싸 테마된 스크롤바를 입히는 래퍼입니다. Flutter / Web 동일 API 로 thumb 색·두께·반경을 scrollbarStyle 단일 슬롯에서 제어합니다.

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 ScrollbarDefaultExample extends StatelessComponent {
  const ScrollbarDefaultExample({super.key});

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

class ScrollbarDefaultExample extends StatefulWidget {
  const ScrollbarDefaultExample({super.key});

  @override
  State<ScrollbarDefaultExample> createState() =>
      _ScrollbarDefaultExampleState();
}

class _ScrollbarDefaultExampleState extends State<ScrollbarDefaultExample> {
  final ScrollController _controller = ScrollController();

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 240,
      height: 160,
      child: Scrollbar(
        controller: _controller,
        child: SingleChildScrollView(
          controller: _controller,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            spacing: CoreSpace.space8,
            children: [
              for (var i = 1; i <= 20; i += 1) Text('스크롤 항목 $i').bodyMedium,
            ],
          ),
        ),
      ),
    );
  }
}

사용법#

// Flutter — 스크롤 컨트롤러 공유
final controller = ScrollController();
Scrollbar(
  controller: controller,
  child: SingleChildScrollView(controller: controller, child: /* ... */),
)

// Web — 스크롤 영역을 감싸면 overflow 를 소유
Scrollbar(child: div(/* tall content */))

Props#

파라미터	타입	기본값	설명
`child`	`Widget` / `Component`	required	스크롤 가능한 콘텐츠
`axis`	`CoreScrollbarAxis`	`defaultAxis`	스크롤 축
`visibility`	`CoreScrollbarVisibility`	`defaultVisibility`	표시 정책 (always / hover 등)
`interactive`	`bool`	`true`	thumb 드래그 가능 여부
`scrollbarStyle`	`CoreScrollbarStyle?`	`null`	thumb 색·두께·반경 (chrome 단일 진입점)

Flutter 는 추가로 controller 를 받아 스크롤 컨트롤러를 공유합니다(framework-infra). Web 은 브라우저 native overflow 로 동작합니다.