Scroll Area `.mv-scroll-area`

얇은 스크롤바, 자동 숨김, 스크롤 기반 가장자리 페이드, 스냅을 갖춘 스크롤 영역입니다.

카테고리	레이아웃
유형	CSS 전용 (`.mv-scroll-area`)
상태	안정
Keywords	scroll, scrollbar, fade, snap, overflow

When to use

A fixed-height region like a chat log, list or code block must scroll with a thin, styled scrollbar
Edge fades should hint that more content exists above, below or to the side
A horizontal row of chips or cards should scroll and snap each item into place

Avoid when

Items should be browsed with arrows, dots or autoplay rather than free scrolling → use Carousel instead
The whole page scrolls normally; nesting scroll regions for main content hurts usability

설치

node scripts/add.mjs scroll-area --out ./src/marvelous

Marvelous UI MCP 서버를 사용하는 AI 에이전트: install_components({ slugs: ["scroll-area"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

복사되는 파일(의존성 포함): tokens/tokens.css, core/base.css, components/scroll-area/scroll-area.css.

사용법

기본 마크업입니다. 여기서 시작해 속성, data-*, CSS 변수로 커스터마이즈하세요:

<div style="display:flex;flex-wrap:wrap;gap:1.25rem;width:100%;min-width:0;max-width:44rem;align-items:start">
  <div style="flex:0 1 14rem;min-width:0;border:1px solid var(--mv-border);border-radius:var(--mv-radius-lg);background:var(--mv-surface);overflow:hidden">
  <div class="mv-scroll-area" data-fade data-autohide role="region" tabindex="0" aria-label="Versions" style="height:14rem">
    <ul style="list-style:none;margin:0;padding:.5rem 1rem;font-size:.875rem">
      <li style="padding:.4rem 0;font-weight:600">Versions</li>
      <li style="padding:.4rem 0;border-top:1px solid var(--mv-border)">v3.4.0: Tokens motion</li>
      <li style="padding:.4rem 0;border-top:1px solid var(--mv-border)">v3.3.2: Focus fix</li>
      <li style="padding:.4rem 0;border-top:1px solid var(--mv-border)">v3.3.1: Dialog swipe</li>
      <li style="padding:.4rem 0;border-top:1px solid var(--mv-border)">v3.3.0: Command palette</li>
      <li style="padding:.4rem 0;border-top:1px solid var(--mv-border)">v3.2.4: Stacked toasts</li>
      <li style="padding:.4rem 0;border-top:1px solid var(--mv-border)">v3.2.0: Calendar</li>
      <li style="padding:.4rem 0;border-top:1px solid var(--mv-border)">v3.1.0: Animated tabs</li>
      <li style="padding:.4rem 0;border-top:1px solid var(--mv-border)">v3.0.0: Web Components</li>
      <li style="padding:.4rem 0;border-top:1px solid var(--mv-border)">v2.9.1: Dark theme</li>
      <li style="padding:.4rem 0;border-top:1px solid var(--mv-border)">v2.9.0: CSS layers</li>
    </ul>
  </div>
  </div>
  <div class="mv-scroll-area" data-orientation="horizontal" data-fade data-snap="x" role="region" tabindex="0" aria-label="Gallery" style="flex:1 1 16rem;min-width:0;display:flex;gap:.75rem;padding-bottom:.5rem">
    <div role="img" aria-label="Coral gradient" style="flex:0 0 9rem;height:12rem;box-sizing:border-box;border:1px solid transparent;border-radius:var(--mv-radius-lg);background:linear-gradient(135deg,oklch(.8 .12 30),oklch(.6 .18 10))"></div>
    <div role="img" aria-label="Amber gradient" style="flex:0 0 9rem;height:12rem;box-sizing:border-box;border:1px solid transparent;border-radius:var(--mv-radius-lg);background:linear-gradient(135deg,oklch(.8 .12 90),oklch(.62 .16 60))"></div>
    <div role="img" aria-label="Lagoon gradient" style="flex:0 0 9rem;height:12rem;box-sizing:border-box;border:1px solid transparent;border-radius:var(--mv-radius-lg);background:linear-gradient(135deg,oklch(.8 .12 160),oklch(.55 .14 180))"></div>
    <div role="img" aria-label="Ocean gradient" style="flex:0 0 9rem;height:12rem;box-sizing:border-box;border:1px solid transparent;border-radius:var(--mv-radius-lg);background:linear-gradient(135deg,oklch(.8 .12 230),oklch(.55 .18 260))"></div>
    <div role="img" aria-label="Orchid gradient" style="flex:0 0 9rem;height:12rem;box-sizing:border-box;border:1px solid transparent;border-radius:var(--mv-radius-lg);background:linear-gradient(135deg,oklch(.8 .12 300),oklch(.55 .2 320))"></div>
    <div role="img" aria-label="Slate gradient" style="flex:0 0 9rem;height:12rem;box-sizing:border-box;border:1px solid transparent;border-radius:var(--mv-radius-lg);background:linear-gradient(135deg,oklch(.75 .08 270),oklch(.4 .1 270))"></div>
  </div>
</div>

API

Attributes

Name	유형	Description
`data-orientation`	vertical \| horizontal	Restricts the scroll axis.
`data-fade`	boolean	Edge fades that disappear at the start/end of the scroll.
`data-autohide`	boolean	Scrollbar only visible on hover/focus.
`data-snap`	x \| y	Snaps the children.

CSS classes

Name	Description
`mv-scroll-area`	On the scrolling container.

CSS variables

Name	Default	Description
`--mv-scroll-area-fade`	`2.5rem`	Fade size.

Accessibility

Pure CSS, so the host adds the semantics: give the container role="region", tabindex="0" and an aria-label so it can be reached and scrolled with the keyboard (arrows, Page Up/Down, Home/End) and is announced as a named region; an aria-label on a plain div without a role is ignored by screen readers. The scrollbar stays native, so touch, wheel and assistive tech scrolling are untouched. Known limits: the edge fades need scroll-driven animations (animation-timeline) and are simply absent elsewhere; data-autohide hides the bar only on hover-capable devices and shows it again on hover or keyboard focus.