Skip to content

Scroll Area

A scrollable region with a slim custom scrollbar, built on the bits-ui ScrollArea. The edges of the content fade out where it is clipped, so a cut-off list reads as "there is more". ref is the element that actually scrolls, for code that needs to read or set its position.

Default

Give the root a height and the content scrolls inside it. The scrollbar is slim and appears on hover, and the edges fade where the content is clipped, so a cut-off list reads as having more below.

  • Tag 1
  • Tag 2
  • Tag 3
  • Tag 4
  • Tag 5
  • Tag 6
  • Tag 7
  • Tag 8
  • Tag 9
  • Tag 10
  • Tag 11
  • Tag 12
  • Tag 13
  • Tag 14
  • Tag 15
  • Tag 16
  • Tag 17
  • Tag 18
  • Tag 19
  • Tag 20
  • Tag 21
  • Tag 22
  • Tag 23
  • Tag 24
  • Tag 25
  • Tag 26
  • Tag 27
  • Tag 28
  • Tag 29
  • Tag 30
  • Tag 31
  • Tag 32
  • Tag 33
  • Tag 34
  • Tag 35
  • Tag 36
  • Tag 37
  • Tag 38
  • Tag 39
  • Tag 40

Scrollbar always visible

type="always" keeps the scrollbar on screen, for places where the reader should see at a glance that there is more.

  • Tag 1
  • Tag 2
  • Tag 3
  • Tag 4
  • Tag 5
  • Tag 6
  • Tag 7
  • Tag 8
  • Tag 9
  • Tag 10
  • Tag 11
  • Tag 12
  • Tag 13
  • Tag 14
  • Tag 15
  • Tag 16
  • Tag 17
  • Tag 18
  • Tag 19
  • Tag 20
  • Tag 21
  • Tag 22
  • Tag 23
  • Tag 24
  • Tag 25
  • Tag 26
  • Tag 27
  • Tag 28
  • Tag 29
  • Tag 30
  • Tag 31
  • Tag 32
  • Tag 33
  • Tag 34
  • Tag 35
  • Tag 36
  • Tag 37
  • Tag 38
  • Tag 39
  • Tag 40

API

Prop Type Default Description
children required import('svelte').Snippet

The content to scroll.

ref bindable HTMLElement | null null

The element that scrolls. Two-way bindable via bind:ref.

type 'hover'|'scroll'|'auto'|'always' 'hover'

When the scrollbar is visible.

class string

Additional Tailwind classes merged onto the root. Give it a height, or there is nothing to scroll.