ScrollViewInterceptor

데스크톱 트랙패드·휠 스크롤을 가로채 스크롤 뷰를 구동하는 래퍼 (인프라)

ScrollViewInterceptor#

데스크톱 포인터(트랙패드·마우스 휠) 스크롤을 가로채 child 스크롤 뷰를 부드럽게 구동하는 인프라 래퍼입니다. 스크롤 가능한 영역을 감싸 데스크톱 스크롤 감도/속도를 디자인 시스템 토큰으로 통일합니다. enabled 가 false 면 가로채지 않고 네이티브 스크롤로 패스합니다.

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

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

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

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

사용법#

ScrollViewInterceptor(
  child: ScrollArea(
    scrollAreaStyle: const CoreScrollAreaStyle(maxHeight: 160),
    child: Column(children: [/* 긴 콘텐츠 */]),
  ),
)

Props#

파라미터	타입	기본값	설명
`child`	`Widget` / `Component`	required	스크롤 가로채기를 적용할 스크롤 뷰
`enabled`	`bool`	`true`	`false` 면 가로채지 않고 네이티브 스크롤로 패스
`scrollViewInterceptorStyle`	`CoreScrollViewInterceptorStyle?`	`null`	dragSpeed·maxScrollSpeed 등 동작 단일 진입점