Report an issue

Scroll Area

Consistent scroll area across platforms.

Scroll Area

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos impedit rem, repellat deserunt ducimus quasi nisi voluptatem cumque aliquid esse ea deleniti eveniet incidunt! Deserunt minus laborum accusamus iusto dolorum. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis officiis error minima eos fugit voluptate excepturi eveniet dolore et, ratione impedit consequuntur dolorem hic quae corrupti autem? Dolorem, sit voluptatum.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos impedit rem, repellat deserunt ducimus quasi nisi voluptatem cumque aliquid esse ea deleniti eveniet incidunt! Deserunt minus laborum accusamus iusto dolorum. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis officiis error minima eos fugit voluptate excepturi eveniet dolore et, ratione impedit consequuntur dolorem hic quae corrupti autem? Dolorem, sit voluptatum.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos impedit rem, repellat deserunt ducimus quasi nisi voluptatem cumque aliquid esse ea deleniti eveniet incidunt! Deserunt minus laborum accusamus iusto dolorum. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis officiis error minima eos fugit voluptate excepturi eveniet dolore et, ratione impedit consequuntur dolorem hic quae corrupti autem? Dolorem, sit voluptatum.

	<script lang="ts">
  import { ScrollArea } from "bits-ui";
  import { cn } from "$lib/utils/styles.js";
 
  let type = $state<"auto" | "hover" | "scroll" | "always">("auto");
  let height = $state(200);
  let width = $state(250);
  let wrapText = $state(false);
  let numParagraphs = $state(3);
</script>
 
<div class="flex w-[500px] max-w-[500px] flex-col gap-4">
  <div class="flex items-center gap-4">
    <div class="flex w-1/5 flex-col gap-1">
      <label for="type">Type</label>
      <select bind:value={type} class="border" id="type">
        <option value="auto">auto</option>
        <option value="hover">hover</option>
        <option value="scroll">scroll</option>
        <option value="always">always</option>
      </select>
    </div>
    <div class="flex w-1/5 flex-col gap-1">
      <label for="height">Height</label>
      <input class="border" type="number" bind:value={height} id="height" />
    </div>
    <div class="flex w-1/5 flex-col gap-1">
      <label for="width">Width</label>
      <input class="border" type="number" bind:value={width} id="width" />
    </div>
    <div class="flex w-1/5 items-center gap-1">
      <label for="wrap">Wrap</label>
      <input type="checkbox" bind:checked={wrapText} id="wrap" />
    </div>
    <div class="flex w-1/5 flex-col gap-1">
      <label for="num-p"> Paragraphs </label>
      <input
        class="border"
        type="number"
        bind:value={numParagraphs}
        id="num-p"
      />
    </div>
  </div>
 
  <ScrollArea.Root
    class="relative overflow-hidden rounded-[10px] border border-dark-10 bg-background-alt px-4 py-4 shadow-card"
    {type}
    style={{ height: `${height}px`, width: `${width}px` }}
  >
    <ScrollArea.Viewport class="h-full w-full">
      <h4
        class="mb-4 mt-2 text-[20px] font-semibold leading-none tracking-[-0.01em] text-foreground"
      >
        Scroll Area
      </h4>
      {#each Array(numParagraphs) as _}
        <p
          class={cn(
            "text-wrap text-sm leading-5 text-foreground-alt",
            !wrapText && "text-nowrap"
          )}
        >
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos
          impedit rem, repellat deserunt ducimus quasi nisi voluptatem cumque
          aliquid esse ea deleniti eveniet incidunt! Deserunt minus laborum
          accusamus iusto dolorum. Lorem ipsum dolor sit, amet consectetur
          adipisicing elit. Blanditiis officiis error minima eos fugit voluptate
          excepturi eveniet dolore et, ratione impedit consequuntur dolorem hic
          quae corrupti autem? Dolorem, sit voluptatum.
        </p>
      {/each}
    </ScrollArea.Viewport>
    <ScrollArea.Scrollbar
      orientation="vertical"
      class="flex w-2.5 touch-none select-none rounded-full border-l border-l-transparent bg-muted p-px transition-all duration-200 hover:w-3 hover:bg-dark-10 data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out-0 data-[state=visible]:fade-in-0"
    >
      <ScrollArea.Thumb
        class="flex-1 rounded-full bg-muted-foreground data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out-0 data-[state=visible]:fade-in-0"
      />
    </ScrollArea.Scrollbar>
    <ScrollArea.Scrollbar
      orientation="horizontal"
      class="flex h-2.5 touch-none select-none rounded-full border-t border-t-transparent bg-muted p-px transition-all duration-200 hover:h-3 hover:bg-dark-10 data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out-0 data-[state=visible]:fade-in-0"
    >
      <ScrollArea.Thumb
        class="rounded-full bg-muted-foreground data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out-0 data-[state=visible]:fade-in-0"
      />
    </ScrollArea.Scrollbar>
    <ScrollArea.Corner />
  </ScrollArea.Root>
</div>

Structure

	<script lang="ts">
	import { ScrollArea } from "$lib/index.js";
</script>
 
<ScrollArea.Root>
	<ScrollArea.Viewport>
		<ScrollArea.Content>
			<!-- ... -->
		</ScrollArea.Content>
	</ScrollArea.Viewport>
	<ScrollArea.Scrollbar orientation="vertical">
		<ScrollArea.Thumb />
	</ScrollArea.Scrollbar>
	<ScrollArea.Scrollbar orientation="horizontal">
		<ScrollArea.Thumb />
	</ScrollArea.Scrollbar>
	<ScrollArea.Corner />
</ScrollArea.Root>

API Reference

ScrollArea.Root

The container of all scroll area components. Overflow is hidden on this element to prevent double scrollbars.

Property Type Description
type
enum

The type of scroll area.

Default: undefined
hideDelay
number

The delay in milliseconds before the scroll area hides itself when using 'hover' or 'scroll' type.

Default: 600
dir
enum

The reading direction of the scroll area.

Default: undefined
asChild
boolean

Whether to use render delegation with this component or not.

Default: false
el
HTMLDivElement

The underlying DOM element being rendered. You can bind to this to programatically interact with the element.

Default: undefined
Slot Property Type Description
builder
object

The builder attributes and actions to apply to the element if using the asChild prop with delegation.

Data Attribute Value Description
data-scroll-area-root
——

Present on the root element.

ScrollArea.Viewport

The component which wraps the content and is responsible for computing the scroll area size.

Property Type Description
asChild
boolean

Whether to use render delegation with this component or not.

Default: false
el
HTMLDivElement

The underlying DOM element being rendered. You can bind to this to programatically interact with the element.

Default: undefined
Slot Property Type Description
builder
object

The builder attributes and actions to apply to the element if using the asChild prop with delegation.

Data Attribute Value Description
data-scroll-area-viewport
——

Present on the viewport element.

ScrollArea.Content

The scrollable content of the scroll area.

Property Type Description
asChild
boolean

Whether to use render delegation with this component or not.

Default: false
el
HTMLDivElement

The underlying DOM element being rendered. You can bind to this to programatically interact with the element.

Default: undefined
Slot Property Type Description
builder
object

The builder attributes and actions to apply to the element if using the asChild prop with delegation.

Data Attribute Value Description
data-scroll-area-content
——

Present on the content element.

ScrollArea.Scrollbar

A scrollbar of the scroll area.

Property Type Description
orientation
*
Required
enum

The orientation of the scrollbar.

Default: undefined
asChild
boolean

Whether to use render delegation with this component or not.

Default: false
el
HTMLDivElement

The underlying DOM element being rendered. You can bind to this to programatically interact with the element.

Default: undefined
Slot Property Type Description
builder
object

The builder attributes and actions to apply to the element if using the asChild prop with delegation.

Data Attribute Value Description
data-state
enum

The visibility state of the scrollbar

data-scroll-area-scrollbar-x
——

Present on 'horizontal' scrollbar element.

data-scroll-area-scrollbar-y
——

Present on the 'vertical' scrollbar element.

ScrollArea.Thumb

A thumb of a scrollbar in the scroll area.

Property Type Description
asChild
boolean

Whether to use render delegation with this component or not.

Default: false
el
HTMLDivElement

The underlying DOM element being rendered. You can bind to this to programatically interact with the element.

Default: undefined
Slot Property Type Description
builder
object

The builder attributes and actions to apply to the element if using the asChild prop with delegation.

Data Attribute Value Description
data-state
enum

The visibility state of the scrollbar

data-scroll-area-thumb-x
——

Present on 'horizontal' thumb element.

data-scroll-area-thumb-y
——

Present on the 'vertical' thumb element.

ScrollArea.Corner

The corner element between the X and Y scrollbars.

Property Type Description
asChild
boolean

Whether to use render delegation with this component or not.

Default: false
el
HTMLDivElement

The underlying DOM element being rendered. You can bind to this to programatically interact with the element.

Default: undefined
Slot Property Type Description
builder
object

The builder attributes and actions to apply to the element if using the asChild prop with delegation.

Data Attribute Value Description
data-scroll-area-corner
——

Present on the corner element.