Scrollable Area
@astryxdesign/core v0.7.1 · ScrollableArea
Usage
ScrollableArea is a native scroll viewport with an observed content box. It enters the tab order only while a requested axis actually overflows. label is required.
<script setup lang="ts">
import { ScrollableArea } from '@astryx-vue/core/ScrollableArea'
</script>
<template>
<ScrollableArea label="Notes" :height="240">
<p>Long content</p>
</ScrollableArea>
</template>axis is block (the default), inline, or both. The component maps those logical axes through writing mode and direction. overscroll is allow or contain. stickyContainment is whenScrollable or always. Padding props apply to the content box and default to 0. isFullBleed lets the viewport escape an ancestor's padding without changing the content padding.
Until overflow is measured, the requested axis uses overflow: clip. After a measurement, an overflowing axis uses auto. always keeps the viewport as a sticky boundary even when the content fits. The tolerance is 1px.
useScrollableArea is the same measurement for a viewport and content box you already own. useScrollOverflow reports the inline start and end edges of one horizontal scroller.
Working with ScrollbarsProvider
When a ScrollbarsProvider sits above it, ScrollableArea switches to the custom overlay scrollbar on its own. You change no code. Without a provider you still get native scrollbars.
To keep the native scrollbar on one area, set :scrollbars="false".
Anatomy
| Element | Description |
|---|---|
| Viewport | The root native scroll container, accessible name owner, focus target while effective, and astryx-scrollable-area theme target. |
| Content box | A real inner layout box observed together with the viewport. For inline scrolling it uses max-content inline sizing with a 100% minimum. |
Best practices
| Guidance | Practices |
|---|---|
| Do | Give every area a short label that names what keyboard users will scroll. |
| Do | Keep overscroll="allow" unless a nested area should stop the gesture. |
| Don't | Wrap it in another overflow container. One viewport should own the scroll. |
| Don't | Hide the scrollbar without another way to reach the overflow. |
Examples
Inline rail
Workspace files
Recently openedaxis inline scrolls the cards sideways. isFullBleed lets the rail reach the panel edges while the first card stays aligned with the heading.
Overscroll
Workspace files
Two sections, two edge policiesoverscroll allow hands a finished gesture to the panel behind it. overscroll contain stops the gesture at the section edge.
Sticky section labels
Workspace files
12 files across 3 sectionsThe scroll viewport is the sticky containing block, so section labels pin to the top of the list.
Sticky passthrough
Workspace files
18 files across 3 sectionsA section that fits passes its sticky label outward. stickyContainment always keeps the next label inside its own box.
Two-axis board
Workspace board
16 files across 4 sectionsaxis both gives the board max-content inline sizing, so one viewport scrolls both ways.