Skip to content
EspañolEnglish
All components (204)

Scroll area

Layout · ScrollArea · .amset-scroll

What it is and when to use it

An area with its own scrolling and the theme's thin scrollbars: whatever does not fit in its height (or its width) is scrolled inside, without moving the page.

When to use it

  • A long text inside a panel or a dialog (some terms, a log), a list of filters that cannot grow without limit, a row of tags that slides sideways.
  • maxHeight is the height from which the scrollbar appears (a CSS length; by default, 20rem). horizontal scrolls sideways instead of down, and then the height is decided by the content.
  • fade fades the edges where there is more content: with a wheel mouse the scrollbar is not always visible, and it is the only sign that there is more. On reaching the end, the fade on that side disappears by itself.
  • label gives it a name. With it, it becomes a focusable region: always use it when there is nothing focusable inside.

When not to

  • Hundreds or thousands of rows: VirtualList. This area is NOT virtual scrolling: it renders everything it holds.
  • Two panels the user divides by dragging: ResizablePanels.
  • The whole page: window scrolling is already the browser's.

Keyboard: with label it is a Tab stop, and with focus on it the arrows, Page Up, Page Down, Home and End scroll it. Without label it gets no tabIndex: if there are links or buttons inside, the Tab key goes through it via them; if there is only text, not every browser lets you reach it without a mouse.

Accessibility: with label it is a region with that name, so the screen reader announces it as a region by its name and it shows up in its list of landmarks; when focused it has the system focus ring. On reaching the end, the wheel does not keep dragging the page behind (overscroll-behavior: contain).

Fine-tuning: --amset-scroll-max (the maximum height; maxHeight writes it), --amset-scroll-thumb and --amset-scroll-track (the scrollbar colours), --amset-scroll-fade (the size of the fade) and --amset-scroll-fade-color, the colour the edge fades into: it has to be the colour of the background underneath (--amset-surface, by default), or the band shows.

What it looks like

1. Delivery time

Orders placed before 2:00 pm on a business day ship that same day. Delivery on the Spanish mainland takes 24 to 48 hours; to the Balearic Islands, 3 to 5 business days.

2. Shipping costs

Shipping is free from €60. Below that amount it costs €4.90 to mainland Spain and €9.90 to the Balearic Islands. The Canary Islands, Ceuta and Melilla also carry customs duties.

3. Tracking

When it leaves the workshop you receive an email with the tracking number. The carrier sends an SMS on the morning of delivery with a two-hour window.

4. Absence at delivery

If nobody is home, the courier leaves a notice and tries a second time the next day. After that, the parcel waits seven days at the nearest office before going back to the workshop.

5. Returns

You have 30 calendar days from delivery to return any piece, no questions asked. It must arrive unused, with its case and certificate of authenticity.

6. Custom pieces

Engravings and custom sizes cannot be returned, except for manufacturing defects. They can be adjusted once at no cost during the first year.

7. Refund

The amount is returned by the same payment method within 14 days of the piece arriving at the workshop and being inspected. Original shipping costs are not refunded.

Aurelia

24 pieces

Silver

Tides

18 pieces

Rose gold

Root

12 pieces

Silver

Constellation

31 pieces

Gold

Breeze

9 pieces

Silver

Amber

15 pieces

Gold

Mother-of-pearl

21 pieces

Pearls

<ScrollArea label="Shipping and returns terms" maxHeight="14rem" fade>
  <Clausulas />
</ScrollArea>

<ScrollArea label="Collections" horizontal fade>
  <FilaDeTarjetas />
</ScrollArea>

Props

Import it with import { ScrollArea } from '@amset/ui'. Required props are marked.

PropTypeWhat it does
childrenrequiredReactNode—
as"article" | "aside" | "div" | "footer" | "header" | "main" | "nav" | "section" | "span"—
classNamestringMerged with the library classes; it does not replace them.
fadebooleanFades the edges where content remains. It is the only sign that there is more, and with a wheel mouse the scrollbar is not always visible.
horizontalbooleanScrolls horizontally instead of vertically.
labelstringName of the zone. With it, it becomes focusable and keyboard-navigable.
maxHeightstringMaximum height before the scrollbar appears. A CSS length.
styleCSSProperties—

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

CSS variables

These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.

VariableDefault
--amset-scroll-max20rem
--amset-scroll-thumbvar(--amset-border-bold)
--amset-scroll-tracktransparent
--amset-scroll-fadevar(--amset-space-6)
--amset-scroll-fade-colorvar(--amset-surface)

How to change it

.amset-scroll {
  --amset-scroll-max: ...;
  --amset-scroll-thumb: ...;
}

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: