Skip to main content

ScrollBox

The ScrollBox component creates a scrollable area for content that exceeds container bounds. Use it to display large amounts of content within constrained spaces while maintaining usability.

The component creates a defined scrollable area with customizable dimensions and scroll behavior.

Support
Targets (10)

Supported targets

Use cases

  • Long lists: Display lists of items or data that exceed available screen space.
  • Constrained layouts: Create scrollable areas within modals where fixed dimensions are required.
  • Dynamic content: Handle content that varies in length, like product lists or search results.
  • Overflow handling: Contain overflow content without disrupting the overall page layout.

Anchor to examplesExamples

Anchor to example-create-a-scrollable-content-areaCreate a scrollable content area

Create scrollable content areas using a ScrollBox component for content that exceeds container bounds. This example shows a basic scrollable area with customizable dimensions.

Create a scrollable content area

Create a scrollable content area

<s-scroll-box>
<s-choice-list>
<s-choice value="true-twin">True Twin board</s-choice>
<s-choice value="directional">Directional board</s-choice>
<s-choice value="volume">Volume shifted board</s-choice>
<s-choice value="asymmetrical">Asymmetrical board</s-choice>
</s-choice-list>
</s-scroll-box>

Anchor to propertiesProperties

Configure the following properties on the ScrollBox component.

Anchor to blockSize
blockSize
Default: 'auto'

Adjust the block size.

Anchor to id
id
string

A unique identifier for the element.

Anchor to inlineSize
inlineSize
Default: 'auto'

Adjust the inline size.

Anchor to maxBlockSize
maxBlockSize
Default: 'none'

Adjust the maximum block size.

Anchor to maxInlineSize
maxInlineSize
Default: 'none'

Adjust the maximum inline size.

Anchor to minBlockSize
minBlockSize
Default: '0'

Adjust the minimum block size.

Anchor to minInlineSize
minInlineSize
Default: '0'

Adjust the minimum inline size.

Anchor to padding
padding
<>
Default: 'none'

Adjust the padding of all edges.

1-to-4-value syntax is supported. Note that, contrary to the CSS, it uses flow-relative values and the order is:

  • 4 values: block-start inline-end block-end inline-start
  • 3 values: block-start inline block-end
  • 2 values: block inline

For example:

  • large means block-start, inline-end, block-end and inline-start paddings are large.
  • large none means block-start and block-end paddings are large, inline-start and inline-end paddings are none.
  • large none large means block-start padding is large, inline-end padding is none, block-end padding is large and inline-start padding is none.
  • large none large small means block-start padding is large, inline-end padding is none, block-end padding is large and inline-start padding is small.

A padding value of auto will use the default padding for the closest container that has had its usual padding removed.

Anchor to paddingBlock
paddingBlock
"" | <>
Default: '' - meaning no override

Adjust the block-padding.

  • large none means block-start padding is large, block-end padding is none.

This overrides the block value of padding.

Anchor to paddingBlockEnd
paddingBlockEnd
"" |
Default: '' - meaning no override

Adjust the block-end padding.

This overrides the block-end value of paddingBlock.

Anchor to paddingBlockStart
paddingBlockStart
"" |
Default: '' - meaning no override

Adjust the block-start padding.

This overrides the block-start value of paddingBlock.

Anchor to paddingInline
paddingInline
"" | <>
Default: '' - meaning no override

Adjust the inline padding.

  • large none means inline-start padding is large, inline-end padding is none.

This overrides the inline value of padding.

Anchor to paddingInlineEnd
paddingInlineEnd
"" |
Default: '' - meaning no override

Adjust the inline-end padding.

This overrides the inline-end value of paddingInline.

Anchor to paddingInlineStart
paddingInlineStart
"" |
Default: '' - meaning no override

Adjust the inline-start padding.

This overrides the inline-start value of paddingInline.

Anchor to best-practicesBest practices

  • Set clear dimensions: Use percentage values for responsive layouts or pixels for exact dimensions.
  • Use for appropriate content: Reserve ScrollBox for long lists or dynamic content that genuinely needs scrolling, not short content that fits within available space.
Was this page helpful?