GitHub

Scroller

Scrollable container with overflow shadows for horizontal, vertical, or both directions.

<rhx-scroller>

Examples

Horizontal

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20

Vertical

List item 1
List item 2
List item 3
List item 4
List item 5
List item 6
List item 7
List item 8
List item 9
List item 10
List item 11
List item 12
List item 13
List item 14
List item 15
List item 16
List item 17
List item 18
List item 19
List item 20
List item 21
List item 22
List item 23
List item 24
List item 25
List item 26
List item 27
List item 28
List item 29
List item 30

Both Directions

1,1
1,2
1,3
1,4
1,5
1,6
1,7
1,8
1,9
1,10
2,1
2,2
2,3
2,4
2,5
2,6
2,7
2,8
2,9
2,10
3,1
3,2
3,3
3,4
3,5
3,6
3,7
3,8
3,9
3,10
4,1
4,2
4,3
4,4
4,5
4,6
4,7
4,8
4,9
4,10
5,1
5,2
5,3
5,4
5,5
5,6
5,7
5,8
5,9
5,10
6,1
6,2
6,3
6,4
6,5
6,6
6,7
6,8
6,9
6,10
7,1
7,2
7,3
7,4
7,5
7,6
7,7
7,8
7,9
7,10
8,1
8,2
8,3
8,4
8,5
8,6
8,7
8,8
8,9
8,10
9,1
9,2
9,3
9,4
9,5
9,6
9,7
9,8
9,9
9,10
10,1
10,2
10,3
10,4
10,5
10,6
10,7
10,8
10,9
10,10

Card Gallery

Card 1

A scrollable card gallery. Each card has a fixed width so the row extends beyond the viewport.

Card 2

A scrollable card gallery. Each card has a fixed width so the row extends beyond the viewport.

Card 3

A scrollable card gallery. Each card has a fixed width so the row extends beyond the viewport.

Card 4

A scrollable card gallery. Each card has a fixed width so the row extends beyond the viewport.

Card 5

A scrollable card gallery. Each card has a fixed width so the row extends beyond the viewport.

Card 6

A scrollable card gallery. Each card has a fixed width so the row extends beyond the viewport.

Card 7

A scrollable card gallery. Each card has a fixed width so the row extends beyond the viewport.

Card 8

A scrollable card gallery. Each card has a fixed width so the row extends beyond the viewport.

No Overflow

A
B
C

Properties

Property Type Default Description
rhx-orientation string horizontal Scroll direction: horizontal, vertical, both

Accessibility

  • The scroller container uses native browser scrolling, so standard scroll behaviors and assistive technology support apply.
  • Overflow shadows are purely visual indicators rendered via CSS gradients — they do not affect the accessibility tree.
  • Ensure scrollable content is reachable via keyboard; focusable elements inside the scroller can be tabbed to naturally.
  • Consider providing an aria-label on the scroller when the scrollable region contains a distinct content group.