On this page

ScrollArea Primitive

ScrollArea is a Starwind Runtime primitive in the viewport-measurement contract family.

Anatomy

Use the Astro primitive adapter to render ScrollArea anatomy with the Runtime wiring included.

---
import { ScrollArea } from "@starwind-ui/astro/scroll-area";
---

<ScrollArea.Root>
  <ScrollArea.Viewport>
    <ScrollArea.Content>Scrollable content</ScrollArea.Content>
  </ScrollArea.Viewport>
  <ScrollArea.Scrollbar>
    <ScrollArea.Thumb />
  </ScrollArea.Scrollbar>
  <ScrollArea.Corner />
</ScrollArea.Root>

Use the React primitive adapter when ScrollArea state participates in React rendering.

import { ScrollArea } from "@starwind-ui/react/scroll-area";

export function Example() {
  return (
    <ScrollArea.Root>
      <ScrollArea.Viewport>
        <ScrollArea.Content>Scrollable content</ScrollArea.Content>
      </ScrollArea.Viewport>
      <ScrollArea.Scrollbar>
        <ScrollArea.Thumb />
      </ScrollArea.Scrollbar>
      <ScrollArea.Corner />
    </ScrollArea.Root>
  );
}

Render the ScrollArea data-sw-* contract yourself, then initialize createScrollArea.

<div data-sw-scroll-area role="presentation">
  <div data-sw-scroll-area-viewport role="presentation" tabindex="-1" style="overflow: scroll;">
    <div data-sw-scroll-area-content role="presentation">Scrollable content</div>
  </div>
  <div data-sw-scroll-area-scrollbar aria-hidden="true">
    <div data-sw-scroll-area-thumb></div>
  </div>
  <div data-sw-scroll-area-corner aria-hidden="true"></div>
</div>

<script type="module">
  import { createScrollArea } from "@starwind-ui/runtime/scroll-area";

  const root = document.querySelector("[data-sw-scroll-area]");
  if (root) {
    createScrollArea(root);
  }
</script>

API Reference

Root

The main element that owns the ScrollArea Runtime instance.

Default element: div
Discovery hook: data-sw-scroll-area
Role: presentation

Props

Prop Type Default

overflowEdgeThreshold number | Partial<{ xStart: number; xEnd: number; yStart: number; yEnd: number; }> -

Description: Configures the overflow edge threshold option for the Root part.
Kind: option
Targets: root
Full type: number | Partial<{ xStart: number; xEnd: number; yStart: number; yEnd: number; }>

Data Attributes

Runtime hooks

Attribute Value Description

data-sw-scroll-area - Marks the Root part so Starwind Runtime can find it.

Metadata

Attribute Value Description

data-overflow-edge-threshold - Reflects the overflow edge threshold prop on the Root part.

Viewport

The visible viewport for ScrollArea content.

Default element: div
Discovery hook: data-sw-scroll-area-viewport
Role: presentation

Data Attributes

Runtime hooks

Attribute Value Description

data-sw-scroll-area-viewport - Marks the Viewport part so Starwind Runtime can find it.

Content

The content container rendered by ScrollArea.

Default element: div
Discovery hook: data-sw-scroll-area-content
Role: presentation

Data Attributes

Runtime hooks

Attribute Value Description

data-sw-scroll-area-content - Marks the Content part so Starwind Runtime can find it.

Scrollbar

A scrollbar used to scroll ScrollArea content.

Default element: div
Discovery hook: data-sw-scroll-area-scrollbar
Role: -

Props

Prop Type Default

keepMounted boolean false

Description: Keeps the Scrollbar part in the DOM when hidden.
Kind: rendering
Targets: scrollbar
Full type: boolean

orientation "horizontal" | "vertical" "vertical"

Description: Sets the ScrollArea orientation.
Kind: option
Targets: scrollbar
Full type: "horizontal" | "vertical"

Data Attributes

Runtime hooks

Attribute Value Description

data-sw-scroll-area-scrollbar - Marks the Scrollbar part so Starwind Runtime can find it.

Metadata

Attribute Value Description

data-keep-mounted - Reflects the keep mounted prop on the Scrollbar part.

data-orientation - Reflects the orientation prop on the Scrollbar part.

Thumb

The draggable thumb for ScrollArea.

Default element: div
Discovery hook: data-sw-scroll-area-thumb
Role: -

Data Attributes

Runtime hooks

Attribute Value Description

data-sw-scroll-area-thumb - Marks the Thumb part so Starwind Runtime can find it.

Corner

The corner where ScrollArea scrollbars meet.

Default element: div
Discovery hook: data-sw-scroll-area-corner
Role: -

Data Attributes

Runtime hooks

Attribute Value Description

data-sw-scroll-area-corner - Marks the Corner part so Starwind Runtime can find it.

Runtime API

Factory: createScrollArea
Import: @starwind-ui/runtime/scroll-area
Root hook: root data-sw-scroll-area
Option props: overflowEdgeThreshold

Option Lifecycles

Option	Lifecycle
overflowEdgeThreshold	refresh-required

Component Relationship

Scroll Area Direct primitive

Layer Metadata

Scroll Area Primitive uses createScrollArea. Styled components: Scroll Area.

primitive Scroll Area Primitive Scroll Area Primitive uses createScrollArea. Styled components: Scroll Area. Runtime primitive Primitive adapter Astro Primitive adapters React Primitive adapters scroll-area Scroll Area Viewport Measurement Primitives that measure and synchronize scrollable viewport UI. /docs/primitives/scroll-area/ createScrollArea @starwind-ui/runtime/scroll-area /docs/runtime/#create-scroll-area root overflowEdgeThreshold raw-html astro react solid svelte vue HTML Astro React Solid Svelte Vue Raw HTML Render the ScrollArea data-sw-* contract yourself, then initialize createScrollArea. html Use the Astro primitive adapter to render ScrollArea anatomy with the Runtime wiring included. Use the React primitive adapter when ScrollArea state participates in React rendering. tsx div data-sw-scroll-area presentation number | Partial<{ xStart: number; xEnd: number; yStart: number; yEnd: number; }> Configures the overflow edge threshold option for the Root part. runtime Marks the Root part so Starwind Runtime can find it. data-overflow-edge-threshold prop Reflects the overflow edge threshold prop on the Root part. viewport data-sw-scroll-area-viewport Marks the Viewport part so Starwind Runtime can find it. content data-sw-scroll-area-content Marks the Content part so Starwind Runtime can find it. scrollbar data-sw-scroll-area-scrollbar keepMounted boolean Keeps the Scrollbar part in the DOM when hidden. orientation "horizontal" | "vertical" Sets the ScrollArea orientation. Marks the Scrollbar part so Starwind Runtime can find it. data-keep-mounted Reflects the keep mounted prop on the Scrollbar part. data-orientation Reflects the orientation prop on the Scrollbar part. thumb data-sw-scroll-area-thumb Marks the Thumb part so Starwind Runtime can find it. corner data-sw-scroll-area-corner Marks the Corner part so Starwind Runtime can find it. Root Viewport tabindex tabIndex style Content Scrollbar aria-hidden Thumb Corner @starwind-ui/astro @starwind-ui/astro/scroll-area Render presentation-only scroll anatomy and self-initialize; runtime owns overflow detection, visibility, and thumb geometry. @starwind-ui/react @starwind-ui/react/scroll-area Create the controller in an effect; structural changes require runtime refresh but current wrapper preserves the initial static anatomy. /docs/components/scroll-area/ Direct primitive direct-primitive Styled component Scroll Area

ScrollArea Primitive

Anatomy

API Reference

Root

Props

Data Attributes

Runtime hooks

Metadata

Viewport

Data Attributes

Runtime hooks

Content

Data Attributes

Runtime hooks

Scrollbar

Props

Data Attributes

Runtime hooks

Metadata

Thumb

Data Attributes

Runtime hooks

Corner

Data Attributes

Runtime hooks

Runtime API

Option Lifecycles

Related Styled Components