lomer-ui

Component

Scroll Area

Navigate overflowing content smoothly.

Installation

Get the component

npx lomer-ui get scroll-area
Source code

Usage

Preview

Line 0

Line 1

Line 2

Line 3

Line 4

Line 5

Line 6

Line 7

Line 8

Line 9

Line 10

Line 11

Line 12

Line 13

Line 14

Line 15

Line 16

Line 17

Line 18

Line 19

Line 20

Line 21

Line 22

Line 23

Line 24

Line 25

Line 26

Line 27

Line 28

Line 29

Line 30

Line 31

Line 32

Line 33

Line 34

Line 35

Line 36

Line 37

Line 38

Line 39

Svelte Code

1 
<script lang="ts">
2 
  import ScrollArea from '$lib/components/base/scroll-area.svelte';
3 
</script>
4
5 
<div class="rounded border py-4">
6 
  <ScrollArea class="h-52 w-40 px-4">
7 
    {#each Array(40) as _, i}
8 
      <p>Line {i}</p>
9 
    {/each}
10 
  </ScrollArea>
11 
</div>
12

Horizontal

Preview

0

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

Svelte Code

1 
<script lang="ts">
2 
  import ScrollArea from '$lib/components/base/scroll-area.svelte';
3 
</script>
4
5 
<div class="rounded border px-4">
6 
  <ScrollArea class="flex w-40 pt-4 pb-2">
7 
    {#each Array(40) as _, i}
8 
      <p class="mx-2">{i}</p>
9 
    {/each}
10 
  </ScrollArea>
11 
</div>
12