HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
Scroll AreaView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA scrolling box that shows which edges have more content past them.StableSince 0.1.0LayoutUsageimport'@fusion.dev/helix/scroll-area'import'@fusion.dev/helix-headless/scroll-area'Preview
API ReferenceRoothelix-scroll-areaA scrolling box that shows which edges have more content past them.
PropTypeDescriptionhideDelaynumberDefault600How long the scrollbars stay after the content stops moving, or the pointer
leaves, in milliseconds. Read under scrollbars="scroll" and
scrollbars="hover". The attribute also takes a CSS time, such as 0.6s.labelstringDefault""The region's name, read by screen readers.orientation"horizontal"|"vertical"The one axis the content scrolls along: vertical or horizontal. The
other axis clips what is past it and has no scrollbar. Unset scrolls both.scrollbars"always"|"auto"|"hover"|"scroll"Draws scrollbars of the component's own in place of the browser's, and
says when they show.
ReadTypeDescriptionscrollerHTMLElement|nullThe element that scrolls. Use it to scroll the content from your code.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The content that scrolls.
EventTypeDescriptionscrollEventThe content scrolled. Sent from the host, because the viewport's own does not leave the shadow root. Does not bubble.scrollendEventThe content stopped scrolling. Sent from the host, as scroll is, and once for a thumb dragged across the content. Does not bubble.
PartDescriptioncornerThe square where the two scrollbars meet, under scrollbars. Hidden unless both are drawn.edgesThe layer that draws the cues on the inline start and end edges.scrollbarEach scrollbar, under scrollbars. Hidden on an axis that has none.scrollbar-horizontalThe scrollbar along the inline axis, alongside scrollbar.scrollbar-verticalThe scrollbar along the block axis, alongside scrollbar.scrollbar-visibleA scrollbar while it is showing, alongside scrollbar. Always under auto and always, and while scrolling, held, or hovered under scroll and hover.thumbThe thumb inside each scrollbar, which drags.thumb-horizontalThe thumb of the horizontal scrollbar, alongside thumb.thumb-verticalThe thumb of the vertical scrollbar, alongside thumb.viewportThe scrolling box.
CSS PropertyDescription--scroll-area-fadeThe depth of the fades at both edges.--scroll-area-fade-block-endThe depth of the bottom fade, or 0 to remove it.--scroll-area-fade-block-startThe depth of the top fade, or 0 to remove it.--scroll-area-fade-colorThe color the fades blend into, which is the background behind the box.--scroll-area-fade-inline-endThe depth of the fade at the inline end, or 0 to remove it.--scroll-area-fade-inline-startThe depth of the fade at the inline start, or 0 to remove it.--scroll-area-scroll-fractionHow far along its axis the content is scrolled, from 0 at the start to 1 at the end. Written on each scrollbar part, so its thumb inherits it. Counted from the right on a right-to-left page.--scroll-area-scrollbarThe scrollbar width, as a scrollbar-width keyword.--scroll-area-scrollbar-sizeThe thickness of each scrollbar drawn under scrollbars, and the size of the corner.--scroll-area-thumb-colorThe color of the scrollbar's thumb. Defaults to --helix-scrollbar-thumb-color.--scroll-area-thumb-fractionThe share of the track the thumb covers, from 0 to 1, which is how much of the content is in view. Written on each scrollbar part.--scroll-area-thumb-hover-colorThe color of the browser's thumb while the pointer is over the scroll area, and of a thumb drawn under scrollbars while the pointer is over it. Defaults to --helix-scrollbar-thumb-hover-color.--scroll-area-thumb-min-sizeThe shortest a thumb drawn under scrollbars gets, however long the content.--scroll-area-track-colorThe color of the scrollbar's track. Defaults to --helix-scrollbar-track-color.
Custom stateDescriptionmore-block-endWhile there is more to scroll to past the block end.more-block-startWhile there is more to scroll back to before the block start.more-inline-endWhile there is more to scroll to past the inline end.more-inline-startWhile there is more to scroll back to before the inline start.scrollbar-horizontalWhile the horizontal scrollbar is drawn, under scrollbars.scrollbar-verticalWhile the vertical scrollbar is drawn, under scrollbars.scrollsWhile the content is larger than the viewport, on either axis.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Roothelix-headless-scroll-areaA scrolling box that shows which edges have more content past them.
PropTypeDescriptionhideDelaynumberDefault600How long the scrollbars stay after the content stops moving, or the pointer
leaves, in milliseconds. Read under scrollbars="scroll" and
scrollbars="hover". The attribute also takes a CSS time, such as 0.6s.labelstringDefault""The region's name, read by screen readers.orientation"horizontal"|"vertical"The one axis the content scrolls along: vertical or horizontal. The
other axis clips what is past it and has no scrollbar. Unset scrolls both.scrollbars"always"|"auto"|"hover"|"scroll"Draws scrollbars of the component's own in place of the browser's, and
says when they show.
ReadTypeDescriptionscrollerHTMLElement|nullThe element that scrolls. Use it to scroll the content from your code.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The content that scrolls.
EventTypeDescriptionscrollEventThe content scrolled. Sent from the host, because the viewport's own does not leave the shadow root. Does not bubble.scrollendEventThe content stopped scrolling. Sent from the host, as scroll is, and once for a thumb dragged across the content. Does not bubble.
PartDescriptioncornerThe square where the two scrollbars meet, under scrollbars. Hidden unless both are drawn.edgesThe layer that draws the cues on the inline start and end edges.scrollbarEach scrollbar, under scrollbars. Hidden on an axis that has none.scrollbar-horizontalThe scrollbar along the inline axis, alongside scrollbar.scrollbar-verticalThe scrollbar along the block axis, alongside scrollbar.scrollbar-visibleA scrollbar while it is showing, alongside scrollbar. Always under auto and always, and while scrolling, held, or hovered under scroll and hover.thumbThe thumb inside each scrollbar, which drags.thumb-horizontalThe thumb of the horizontal scrollbar, alongside thumb.thumb-verticalThe thumb of the vertical scrollbar, alongside thumb.viewportThe scrolling box.
CSS PropertyDescription--scroll-area-scroll-fractionHow far along its axis the content is scrolled, from 0 at the start to 1 at the end. Written on each scrollbar part, so its thumb inherits it. Counted from the right on a right-to-left page.--scroll-area-thumb-fractionThe share of the track the thumb covers, from 0 to 1, which is how much of the content is in view. Written on each scrollbar part.
Custom stateDescriptionmore-block-endWhile there is more to scroll to past the block end.more-block-startWhile there is more to scroll back to before the block start.more-inline-endWhile there is more to scroll to past the inline end.more-inline-startWhile there is more to scroll back to before the inline start.scrollbar-horizontalWhile the horizontal scrollbar is drawn, under scrollbars.scrollbar-verticalWhile the vertical scrollbar is drawn, under scrollbars.scrollsWhile the content is larger than the viewport, on either axis.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Examples
NameDescriptionHorizontalA row wider than its box, with fades on the edges that have more content.One AxisA list that scrolls up and down only, so a long line is cut at the edge and no sideways scrollbar is drawn.One EdgeA fade on one edge only. Set a fade's depth to 0 to remove it.PreviewA scrolling box, faded at each edge that has more content past it.PreviewA scrolling box, faded at each edge that has more content past it.ScrollbarsScrollbars drawn by the component in place of the browser's. Set scrollbars to hover or scroll to show them only while they are in use.ScrollbarsScrollbars drawn by the component in place of the browser's. Set scrollbars to hover or scroll to show them only while they are in use.