Kaiko UI Kaiko UI

Scroll Area

New

A styled scrollable container that applies the project's custom scrollbar behaviour. Wraps any overflowing content with configurable overflow direction and dimensions.

API Reference

Attribute Description Type Default
height Full Tailwind height class applied to the container (e.g. h-64, h-[400px]) string ""
max_height Full Tailwind max-height class applied (e.g. max-h-96, max-h-[500px]) string ""
direction Scroll axis for the container string "vertical"

direction

vertical horizontal both

Accessibility

Keyboard reachability: scrollable regions that are not interactive are not reachable by keyboard users. Add tabindex="0" so keyboard users can focus and scroll the region with arrow keys.

Landmark: add role="region" and a descriptive aria-label so screen readers announce the scrollable landmark when the user enters it.

Example: <c-scroll-area height="h-64" tabindex="0" role="region" aria-label="Activity log">

Examples

Usage 


<c-scroll-area height="h-48" tabindex="0" role="region" aria-label="Activity log">
  <!-- overflowing content -->
</c-scroll-area>

Vertical Scroll (default)

  • Activity entry — row 1: Vessel departed port at 08:12 UTC
  • Activity entry — row 2: Vessel departed port at 08:22 UTC
  • Activity entry — row 3: Vessel departed port at 08:32 UTC
  • Activity entry — row 4: Vessel departed port at 08:42 UTC
  • Activity entry — row 5: Vessel departed port at 08:52 UTC
  • Activity entry — row 6: Vessel departed port at 08:62 UTC
  • Activity entry — row 7: Vessel departed port at 08:72 UTC
  • Activity entry — row 8: Vessel departed port at 08:82 UTC
  • Activity entry — row 9: Vessel departed port at 08:92 UTC
  • Activity entry — row 10: Vessel departed port at 08:102 UTC
  • Activity entry — row 11: Vessel departed port at 08:112 UTC
  • Activity entry — row 12: Vessel departed port at 08:122 UTC
  • Activity entry — row 13: Vessel departed port at 08:132 UTC
  • Activity entry — row 14: Vessel departed port at 08:142 UTC
  • Activity entry — row 15: Vessel departed port at 08:152 UTC
  • Activity entry — row 16: Vessel departed port at 08:162 UTC
  • Activity entry — row 17: Vessel departed port at 08:172 UTC
  • Activity entry — row 18: Vessel departed port at 08:182 UTC
  • Activity entry — row 19: Vessel departed port at 08:192 UTC
  • Activity entry — row 20: Vessel departed port at 08:202 UTC
  • Activity entry — row 21: Vessel departed port at 08:212 UTC
  • Activity entry — row 22: Vessel departed port at 08:222 UTC
  • Activity entry — row 23: Vessel departed port at 08:232 UTC
  • Activity entry — row 24: Vessel departed port at 08:242 UTC
  • Activity entry — row 25: Vessel departed port at 08:252 UTC
  • Activity entry — row 26: Vessel departed port at 08:262 UTC
  • Activity entry — row 27: Vessel departed port at 08:272 UTC
  • Activity entry — row 28: Vessel departed port at 08:282 UTC
  • Activity entry — row 29: Vessel departed port at 08:292 UTC
  • Activity entry — row 30: Vessel departed port at 08:302 UTC 
<c-scroll-area height="h-48" tabindex="0" role="region" aria-label="Vessel activity log">
  <ul class="space-y-2">
    <li>Activity entry 1</li>
    <li>Activity entry 2</li>
    ...
  </ul>
</c-scroll-area>

Horizontal Scroll

Vessel IMO Flag Type GT DWT Built Status
MV Atlantic Star 9123456 Panama Bulk Carrier 42,500 81,200 2018 Active
MV Nordic Breeze 9234567 Norway Container 38,200 45,600 2020 Active
MV Pacific Dawn 9345678 Marshall Islands Tanker 61,000 115,400 2015 Maintenance
MV Southern Cross 9456789 Liberia General Cargo 12,800 18,200 2012 Inactive 
<c-scroll-area direction="horizontal" tabindex="0" role="region" aria-label="Vessel comparison table">
  <table class="table" style="min-width: 900px;">
    ...
  </table>
</c-scroll-area>

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80 
<c-scroll-area direction="both" height="h-48" tabindex="0" role="region" aria-label="Route map data">
  <div style="width: 800px;">
    <!-- Wide and tall content -->
  </div>
</c-scroll-area>

Max-height Constraint

Short content item 1

Short content item 2

Short content item 3

Short content item 4

Short content item 5

Short content item 6

Short content item 7

Short content item 8 

<!-- Grows to fit content, scrolls when content exceeds max-h-40 -->
<c-scroll-area max_height="max-h-40" tabindex="0" role="region" aria-label="Notes section">
  <p>Item 1</p>
  <p>Item 2</p>
  ...
</c-scroll-area>