Loading…

Scroll Area Samples

Glorified `overflow-scroll`

PinningGo ToX/Y Axis

Scroll Area — Vertical

Tall content with vertical scrolling. Uses `ScrollBar orientation="vertical"`.

Scrollbars appear automatically when needed (`type="auto"`).

Images use `next/Image`. Links use `next/Link`.

Vertical

Scroll Area — Horizontal

Wide content with horizontal scrolling. Adds `orientation="horizontal"` scrollbar.

Mountain 1

Mountain 2

Mountain 3

Mountain 4

Mountain 5

Mountain 6

Mountain 7

Mountain 8

Mountain 9

Mountain 10

Mountain 11

Mountain 12

Mountain 13

Mountain 14

Mountain 15

Mountain 16

Using `type="scroll"` shows scrollbars whenever content overflows.

HorizontalHold Shift + Wheel to scroll horizontally

Scroll Area — Both Axes

A large canvas that scrolls vertically and horizontally; both scrollbars rendered.

Card 1

This card sits inside a large grid to demonstrate scrolling on both axes.

Card 2

This card sits inside a large grid to demonstrate scrolling on both axes.

Card 3

This card sits inside a large grid to demonstrate scrolling on both axes.

Card 4

This card sits inside a large grid to demonstrate scrolling on both axes.

Card 5

This card sits inside a large grid to demonstrate scrolling on both axes.

Card 6

This card sits inside a large grid to demonstrate scrolling on both axes.

Card 7

This card sits inside a large grid to demonstrate scrolling on both axes.

Card 8

This card sits inside a large grid to demonstrate scrolling on both axes.

Card 9

This card sits inside a large grid to demonstrate scrolling on both axes.

Card 10

This card sits inside a large grid to demonstrate scrolling on both axes.

Card 11

This card sits inside a large grid to demonstrate scrolling on both axes.

Card 12

This card sits inside a large grid to demonstrate scrolling on both axes.

Card 13

This card sits inside a large grid to demonstrate scrolling on both axes.

Card 14

This card sits inside a large grid to demonstrate scrolling on both axes.

Card 15

This card sits inside a large grid to demonstrate scrolling on both axes.

Card 16

This card sits inside a large grid to demonstrate scrolling on both axes.

Card 17

This card sits inside a large grid to demonstrate scrolling on both axes.

Card 18

This card sits inside a large grid to demonstrate scrolling on both axes.

`type="always"` keeps scrollbars visible, useful for canvases/boards.

Both AxesResizable containers work well with this pattern.

Scroll Area — Chat Log

Programmatic control: stick to bottom while new messages arrive.

Messages: 10

Apnatva10:01
Hey! Got the new fabric swatches.
Dev10:05
Nice—uploading the catalog shortly.
Apnatva10:08
Remember the pastel palette.
Dev10:10
On it. Also optimizing images.
Apnatva10:11
Perfect. Let’s push a preview.
Dev10:12
Preview link coming up.
Apnatva10:13
Share to the team once ready.
Dev10:14
Done ✅
Apnatva10:16
Looks great!
Dev10:18
Shipping final export.

For auto-scroll, move the container’s `scrollTop` to `scrollHeight` when appending.

ProgrammaticLight/Dark compatible

Dynamic Standalone Sample Mount | AP Component Library