Core UI

Scrollable

Container with custom-styled scrollbars for consistent scrolling experience across browsers.

Installation

Import 
import { Scrollable } from '@svelte-atoms/core/scrollable';

Preset Configuration

Customize the scrollable appearance using presets

You can customize the default styles for Scrollable components by defining presets in your configuration:

Examples

Explore different scrollable variations

Vertical Scroll

Fixed height container with vertical scrolling

Line 1 of scrollable content

Line 2 of scrollable content

Line 3 of scrollable content

Line 4 of scrollable content

Line 5 of scrollable content

Line 6 of scrollable content

Line 7 of scrollable content

Line 8 of scrollable content

Line 9 of scrollable content

Line 10 of scrollable content

Line 11 of scrollable content

Line 12 of scrollable content

Line 13 of scrollable content

Line 14 of scrollable content

Line 15 of scrollable content

Line 16 of scrollable content

Line 17 of scrollable content

Line 18 of scrollable content

Line 19 of scrollable content

Line 20 of scrollable content

Code 
<Scrollable.Root>
  <Scrollable.Container height={200}>
    <Scrollable.Content>
      <div>Long content...</div>
    </Scrollable.Content>
  </Scrollable.Container>
</Scrollable.Root>

Horizontal Scroll

Horizontal scrolling container

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Code 
<Scrollable.Root>
  <Scrollable.Container>
    <Scrollable.Content>
      <div class="flex gap-4">
        <div>Item 1</div>
        <div>Item 2</div>
      </div>
    </Scrollable.Content>
  </Scrollable.Container>
</Scrollable.Root>

Both Directions

Scroll in both directions

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
Code 
<Scrollable.Root>
  <Scrollable.Container height={300}>
    <Scrollable.Content>
      <div class="grid grid-cols-10 gap-4" style="min-width: 1200px;">
        {#each Array(50) as _, i}
          <div class="bg-muted rounded p-4 text-center">
            {i + 1}
          </div>
        {/each}
      </div>
    </Scrollable.Content>
  </Scrollable.Container>
</Scrollable.Root>

API Reference

Scrollable Props

Prop
Type
Default
Description
factory
Factory<ScrollableBond> | undefined
undefined
Factory
scrollX
number | undefined
0
Scroll X
scrollY
number | undefined
0
Scroll Y
scrollWidth
number | undefined
0
Scroll Width
scrollHeight
number | undefined
0
Scroll Height
clientWidth
number | undefined
0
Client Width
clientHeight
number | undefined
0
Client Height
disabled
boolean | undefined
false
Disabled
open
boolean | undefined
false
Open

Accessibility

Built-in Accessibility Features

  • • Keyboard scrolling (Arrow keys)
  • • Focus visible on scroll container
  • • Screen reader compatible
  • • Respects prefers-reduced-motion
  • • Touch-friendly scrolling
Previous
Radio
Next
Sidebar