Create

Layout

Scroll Area

New
Copy page View as Markdown Open in ChatGPT Open in Claude

Augments native scroll functionality for custom, cross-browser styling.

Usage#

app.component.ts
import { WdsScrollAreaComponent } from '@wds/angular/scroll-area';

Give the area a height (or a width for horizontal scrolling) with CSS. Scrolling stays native, so the mouse wheel, touch, the keyboard and find in page work as usual; only the scrollbars are drawn by WDS. viewport returns the scrolling element for scrollTo().

Examples#

Default#

A vertical area with a fixed height. The scrollbar shows while the pointer is over the area or while it scrolls, and its thumb can be dragged. label names the area as a region.

Tags
v1.2.0-beta.50
v1.2.0-beta.49
v1.2.0-beta.48
v1.2.0-beta.47
v1.2.0-beta.46
v1.2.0-beta.45
v1.2.0-beta.44
v1.2.0-beta.43
v1.2.0-beta.42
v1.2.0-beta.41
v1.2.0-beta.40
v1.2.0-beta.39
v1.2.0-beta.38
v1.2.0-beta.37
v1.2.0-beta.36
v1.2.0-beta.35
v1.2.0-beta.34
v1.2.0-beta.33
v1.2.0-beta.32
v1.2.0-beta.31
v1.2.0-beta.30
v1.2.0-beta.29
v1.2.0-beta.28
v1.2.0-beta.27
v1.2.0-beta.26
v1.2.0-beta.25
v1.2.0-beta.24
v1.2.0-beta.23
v1.2.0-beta.22
v1.2.0-beta.21
v1.2.0-beta.20
v1.2.0-beta.19
v1.2.0-beta.18
v1.2.0-beta.17
v1.2.0-beta.16
v1.2.0-beta.15
v1.2.0-beta.14
v1.2.0-beta.13
v1.2.0-beta.12
v1.2.0-beta.11
v1.2.0-beta.10
v1.2.0-beta.9
v1.2.0-beta.8
v1.2.0-beta.7
v1.2.0-beta.6
v1.2.0-beta.5
v1.2.0-beta.4
v1.2.0-beta.3
v1.2.0-beta.2
v1.2.0-beta.1

Horizontal#

orientation="horizontal" scrolls sideways.

Photo by Ornella Binni
Photo by Tom Byrom
Photo by Vladimir Malyavko
Photo by Mira Stone
Photo by Ola Nowak
Photo by Pedro Duarte

Both directions#

orientation="both" scrolls both ways, e.g. a wide table; the two scrollbars leave the corner free.

Column 1Column 2Column 3Column 4Column 5Column 6Column 7Column 8Column 9Column 10Column 11Column 12
R1C1R1C2R1C3R1C4R1C5R1C6R1C7R1C8R1C9R1C10R1C11R1C12
R2C1R2C2R2C3R2C4R2C5R2C6R2C7R2C8R2C9R2C10R2C11R2C12
R3C1R3C2R3C3R3C4R3C5R3C6R3C7R3C8R3C9R3C10R3C11R3C12
R4C1R4C2R4C3R4C4R4C5R4C6R4C7R4C8R4C9R4C10R4C11R4C12
R5C1R5C2R5C3R5C4R5C5R5C6R5C7R5C8R5C9R5C10R5C11R5C12
R6C1R6C2R6C3R6C4R6C5R6C6R6C7R6C8R6C9R6C10R6C11R6C12
R7C1R7C2R7C3R7C4R7C5R7C6R7C7R7C8R7C9R7C10R7C11R7C12
R8C1R8C2R8C3R8C4R8C5R8C6R8C7R8C8R8C9R8C10R8C11R8C12
R9C1R9C2R9C3R9C4R9C5R9C6R9C7R9C8R9C9R9C10R9C11R9C12
R10C1R10C2R10C3R10C4R10C5R10C6R10C7R10C8R10C9R10C10R10C11R10C12
R11C1R11C2R11C3R11C4R11C5R11C6R11C7R11C8R11C9R11C10R11C11R11C12
R12C1R12C2R12C3R12C4R12C5R12C6R12C7R12C8R12C9R12C10R12C11R12C12
R13C1R13C2R13C3R13C4R13C5R13C6R13C7R13C8R13C9R13C10R13C11R13C12
R14C1R14C2R14C3R14C4R14C5R14C6R14C7R14C8R14C9R14C10R14C11R14C12
R15C1R15C2R15C3R15C4R15C5R15C6R15C7R15C8R15C9R15C10R15C11R15C12
R16C1R16C2R16C3R16C4R16C5R16C6R16C7R16C8R16C9R16C10R16C11R16C12
R17C1R17C2R17C3R17C4R17C5R17C6R17C7R17C8R17C9R17C10R17C11R17C12
R18C1R18C2R18C3R18C4R18C5R18C6R18C7R18C8R18C9R18C10R18C11R18C12
R19C1R19C2R19C3R19C4R19C5R19C6R19C7R19C8R19C9R19C10R19C11R19C12
R20C1R20C2R20C3R20C4R20C5R20C6R20C7R20C8R20C9R20C10R20C11R20C12

Fade#

fade fades out the edges behind which there is more content.

Scrolling stays native: the mouse wheel, touch, the keyboard and find in page work as usual.

Only the browser scrollbars are replaced with thin ones drawn over the content.

With fade, the edges behind which there is more content fade out, so it is clear that the list goes on.

The top edge fades only after you scroll down, and the bottom one disappears at the end.

Scrolling stays native: the mouse wheel, touch, the keyboard and find in page work as usual.

Only the browser scrollbars are replaced with thin ones drawn over the content.

With fade, the edges behind which there is more content fade out, so it is clear that the list goes on.

The top edge fades only after you scroll down, and the bottom one disappears at the end.

Scrolling stays native: the mouse wheel, touch, the keyboard and find in page work as usual.

Only the browser scrollbars are replaced with thin ones drawn over the content.

With fade, the edges behind which there is more content fade out, so it is clear that the list goes on.

The top edge fades only after you scroll down, and the bottom one disappears at the end.

Gutter#

The scrollbar is drawn over the content. gutter (right) reserves space for it, so it never covers text.

Invoice #1040$20.00
Invoice #1041$57.00
Invoice #1042$94.00
Invoice #1043$131.00
Invoice #1044$168.00
Invoice #1045$205.00
Invoice #1046$242.00
Invoice #1047$279.00
Invoice #1048$316.00
Invoice #1049$353.00
Invoice #1050$390.00
Invoice #1051$427.00
Invoice #1052$464.00
Invoice #1053$501.00
Invoice #1054$38.00
Invoice #1055$75.00
Invoice #1056$112.00
Invoice #1057$149.00
Invoice #1058$186.00
Invoice #1059$223.00
Invoice #1040$20.00
Invoice #1041$57.00
Invoice #1042$94.00
Invoice #1043$131.00
Invoice #1044$168.00
Invoice #1045$205.00
Invoice #1046$242.00
Invoice #1047$279.00
Invoice #1048$316.00
Invoice #1049$353.00
Invoice #1050$390.00
Invoice #1051$427.00
Invoice #1052$464.00
Invoice #1053$501.00
Invoice #1054$38.00
Invoice #1055$75.00
Invoice #1056$112.00
Invoice #1057$149.00
Invoice #1058$186.00
Invoice #1059$223.00

Scrollbar visibility#

type sets when the scrollbars show: hover (default: pointer over the area or scrolling), scroll (only while scrolling), auto (whenever the content overflows) or always. scroll-hide-delay sets how long they stay after scrolling (default 600 ms).

hover
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
scroll
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
auto
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
always
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

API References#

wds-scroll-area#

A scrollable box with thin scrollbars drawn over the content, in the style of the page. Scrolling stays native: the mouse wheel, touch, the keyboard and find-in-page work as usual; only the browser scrollbars are replaced. Give the area a height (or a width for horizontal scrolling) with CSS. When the content overflows, the area can get keyboard focus (so it can be scrolled with the arrow keys) unless the content has focusable elements of its own. Name it with label when it is a distinct region of the page.

Attributes

AttributeTypeDefaultDescription
orientationWdsScrollAreaOrientation'vertical'Scroll direction: vertical, horizontal or both.
typeWdsScrollAreaType'hover'When the scrollbars show: hover (pointer over the area, or scrolling), scroll (only while scrolling), auto (whenever the content overflows) or always (also without overflow, as an empty track).
scroll-hide-delay.scrollHideDelaynumber600Delay in ms before the scrollbars hide after scrolling stops (with hover and scroll).
fadebooleanfalseFades out the edges behind which there is more content.
gutterbooleanfalseReserves space for the scrollbar, so the content never runs under it.
labelstring | undefinedAccessible name; the area becomes a region landmark.

Slots

SlotDescription
(default)Content.

CSS parts (::part)

PartDescription
viewportThe scrolling element.
scrollbarA scrollbar track (vertical and horizontal).
thumbA scrollbar thumb.

CSS custom properties

PropertyDescription
--wds-scroll-area-scrollbar-sizeWidth of the scrollbar (default 10px).
--wds-scroll-area-thumbColor of the thumb (default --wds-border).

Accessibility#

Screen reader#

The custom scrollbars are hidden from screen readers; the content is read as usual.

With label the area is a region landmark with that name. Leave it out for small lists inside other components.

When the content overflows and has no focusable elements, the area itself gets keyboard focus, so it can be scrolled with the keyboard (WCAG 2.1.1).

Keyboard support#

KeyFunction
TabFocuses the area when it scrolls and has no focusable content.
ArrowDownScrolls down (ArrowUp, ArrowLeft and ArrowRight scroll the other ways).
PageDownScrolls one page (PageUp goes back).
HomeScrolls to the start (End to the end).
Footer