Choose a version:

Scroll box

The scroll box 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 (7)

Supported targets

Anchor to PropertiesProperties

Configure the following properties on the ScrollBox component.

Anchor to blockSize blockSize Default: 'auto': The block size of the scrollable container. Auto automatically sizes based on the container's content and available space.
Anchor to id id string: A unique identifier for the element used for targeting with CSS, JavaScript, or accessibility features.
Anchor to inlineSize inlineSize Default: 'auto': The inline size of the scrollable container. Auto automatically sizes based on the container's content and available space.
Anchor to maxBlockSize maxBlockSize Default: 'none': The maximum block size constraint for the scrollable container.
Anchor to maxInlineSize maxInlineSize Default: 'none': The maximum inline size constraint for the scrollable container.
Anchor to minBlockSize minBlockSize Default: '0': The minimum block size constraint for the scrollable container.
Anchor to minInlineSize minInlineSize Default: '0': The minimum inline size constraint for the scrollable container.
Anchor to padding padding <> Default: 'none': The padding applied to all edges of the scrollable container. Supports 1-to-4-value syntax using flow-relative values in the order:

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.

An auto value inherits the default padding from the closest container that has removed its usual padding.
Anchor to paddingBlock paddingBlock '' | <> Default: '' - meaning no override: The block-axis padding for the scrollable container. Overrides the block value of the padding property.
Anchor to paddingBlockEnd paddingBlockEnd '' | Default: '' - meaning no override: The block-end padding for the scrollable container. Overrides the block-end value of the paddingBlock property.
Anchor to paddingBlockStart paddingBlockStart '' | Default: '' - meaning no override: The block-start padding for the scrollable container. Overrides the block-start value of the paddingBlock property.
Anchor to paddingInline paddingInline '' | <> Default: '' - meaning no override: The inline-axis padding for the scrollable container. Supports two-value syntax where large none sets inline-start to large and inline-end to none. Overrides the inline value of the padding property.
Anchor to paddingInlineEnd paddingInlineEnd '' | Default: '' - meaning no override: The inline-end padding for the scrollable container. Overrides the inline-end value of the paddingInline property.
Anchor to paddingInlineStart paddingInlineStart '' | Default: '' - meaning no override: The inline-start padding for the scrollable container. Overrides the inline-start value of the paddingInline property.

SizeUnitsOrAuto

Defines size values that can be specified as exact measurements or automatic sizing. Supports pixel values, percentages, zero, or automatic sizing based on content.

SizeUnits | 'auto'

SizeUnits

Defines exact size measurements without automatic or unconstrained options. Limited to specific pixel values, percentages, or zero.

`${number}px` | `${number}%` | `0`

SizeUnitsOrNone

Defines size values that can be specified as exact measurements or no constraint. Supports pixel values, percentages, zero, or no maximum limit.

SizeUnits | 'none'

MaybeAllValuesShorthandProperty

A utility type for properties that support [1-to-4-value shorthand syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties#edges_of_a_box).

T | `${T} ${T}` | `${T} ${T} ${T}` | `${T} ${T} ${T} ${T}`

PaddingKeyword

Defines the available padding size options using a semantic scale. Provides consistent spacing values that align with the POS design system.

SizeKeyword | 'none'

SizeKeyword

Defines the available size options for icons using a semantic scale. Provides granular control over icon dimensions from compact inline sizes to prominent display sizes.

'small-500' | 'small-400' | 'small-300' | 'small-200' | 'small-100' | 'small' | 'base' | 'large' | 'large-100' | 'large-200' | 'large-300' | 'large-400' | 'large-500'

MaybeTwoValuesShorthandProperty

Defines a shorthand property that accepts either a single value or two space-separated values for directional properties like padding and spacing.

T | `${T} ${T}`

Anchor to ExamplesExamples

Anchor to Create a scrollable content areaCreate a scrollable content area

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

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 Best practicesBest practices

Set clear dimensions: Use percentage values for responsive layouts or pixels for exact dimensions.
Use for appropriate content: Reserve scroll box for long lists or dynamic content that genuinely needs scrolling, not short content that fits within available space.

Was this page helpful?