HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
Scroll AreaView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA scrolling box that says there is more.StableSince 0.1.0LayoutUsageimport'@fusion.dev/helix/scroll-area'import'@fusion.dev/helix-headless/scroll-area'Preview
API ReferenceRoothelix-scroll-areaA scrolling box that says there is more.
PropTypeDefaultDescriptionlabelstring""Names the region, for a reader arriving at it out of context.
ReadTypeDescriptionscrollerHTMLElement|nullThe box that actually scrolls, for anything that needs to move it.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)What scrolls.
PartDescriptionedgesWhere the sideways edge cues are drawn.viewportThe scrolling box.
CSS PropertyDescription--scroll-area-fadeHow deep the fades are, at both edges.--scroll-area-fade-block-endAnd the bottom one.--scroll-area-fade-block-startHow deep the top one is, or `0` to drop it.--scroll-area-fade-colorWhat they fade to, which is the ground behind.--scroll-area-fade-inline-endAnd the trailing one.--scroll-area-fade-inline-startHow deep the leading sideways one is, or `0` to drop it.--scroll-area-scrollbarThe scrollbar width keyword.--scroll-area-thumb-colorThe scrollbar's handle.--scroll-area-track-colorAnd its track.
Roothelix-headless-scroll-areaA scrolling box that says there is more.
PropTypeDefaultDescriptionlabelstring""Names the region, for a reader arriving at it out of context.
ReadTypeDescriptionscrollerHTMLElement|nullThe box that actually scrolls, for anything that needs to move it.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)What scrolls.
PartDescriptionedgesWhere the sideways edge cues are drawn.viewportThe scrolling box.
ExamplesNameDescriptionHorizontalA row that runs past its box, and the edges that say which way.One EdgeEither edge can be dropped, by giving its fade no depth.PreviewA box that scrolls, with the overflow faded at whichever edge has more.PreviewA box that scrolls, with the overflow faded at whichever edge has more.