Skip to main content
View source

ScrollArea

Themed scroll area with a squared thumb and Lenis-friendly wheel handling.

Usage

svelte 
<script lang="ts">
  import { css } from "@milandekruijf/pandacss/css";
  import { ScrollArea } from "@milandekruijf/ui/svelte";

  const rootClass = css({ h: 48, maxW: "28rem", minW: 0 });
  const viewportClass = css({ h: "full" });
</script>

<ScrollArea {rootClass} {viewportClass} type="hover">
  <div class={css({ display: "flex", flexDirection: "column", gap: 2, p: 4 })}>
    {#each Array.from({ length: 12 }, (_, i) => i + 1) as line (line)}
      <span>scroll content line {line}</span>
    {/each}
  </div>
</ScrollArea>

Examples

Scrollable list
scroll content line 1scroll content line 2scroll content line 3scroll content line 4scroll content line 5scroll content line 6scroll content line 7scroll content line 8scroll content line 9scroll content line 10scroll content line 11scroll content line 12
<script lang="ts">
  import { css } from "@milandekruijf/pandacss/css";
  import { ScrollArea } from "@milandekruijf/ui/svelte";

  const rootClass = css({
    h: 32,
    maxW: "28rem",
    minW: 0,
  });

  const viewportClass = css({ h: "full" });

  const contentClass = css({
    display: "flex",
    flexDirection: "column",
    gap: 2,
    p: 4,
    fontSize: "sm",
    color: "slate.11",
  });
</script>

<ScrollArea {rootClass} {viewportClass} type="hover">
  <div class={contentClass}>
    {#each Array.from({ length: 12 }, (_, i) => i + 1) as line (line)}
      <span>scroll content line {line}</span>
    {/each}
  </div>
</ScrollArea>

Props

PropTypeDefaultDescription
viewportRef?HTMLDivElement | null—
Bindable handle to the scroll viewport element (`bind:viewportRef`).
type?"hover" | "scroll" | "auto" | "always""hover"
When the scrollbar is visible.
orientation?"vertical" | "horizontal" | "both""vertical"
Which scrollbar(s) to render.
appScrollViewport?booleanfalse
Marks this as the main app scroller: Lenis, ScrollTrigger, and the nav read it via `getScrollAreaViewport()`.
lenisPreventHorizontal?booleanfalse
Keeps horizontal wheel/trackpad gestures native.
lenisPreventWheel?booleanfalse
Lets wheel events skip Lenis so nested scrollers behave natively.
smooth?booleantrue
Smooth-scroll this area with its own Lenis instance (both axes). Set to `false` to keep native scrolling.
smoothIntensity?"light" | "default" | "strong""default"
How strongly to smooth. `light` tracks the wheel closely with less distance per notch — good for dense lists like a sidebar of links.
rootClass?string—
Classes for the scroll area root.
viewportClass?string—
Classes for the scroll viewport.
childrenSnippet—
Scrollable content.