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.
Supported targets
- pos.
cart. line-item-details. action. render - pos.
customer-details. action. render - pos.
draft-order-details. action. render - pos.
exchange. post. action. render - pos.
home. modal. render - pos.
order-details. action. render - pos.
product-details. action. render - pos.
purchase. post. action. render - pos.
register-details. action. render - pos.
return. post. action. render
Supported targets
- pos.
cart. line-item-details. action. render - pos.
customer-details. action. render - pos.
draft-order-details. action. render - pos.
exchange. post. action. render - pos.
home. modal. render - pos.
order-details. action. render - pos.
product-details. action. render - pos.
purchase. post. action. render - pos.
register-details. action. render - pos.
return. post. action. render
Anchor to PropertiesProperties
Configure the following properties on the scroll box component.
- Anchor to blockSizeblockSizeblockSizeSizeUnitsOrAutoSizeUnitsOrAutoDefault: 'auto'Default: 'auto'
Adjust the block size.
- Anchor to idididstringstring
A unique identifier for the element.
- Anchor to inlineSizeinlineSizeinlineSizeSizeUnitsOrAutoSizeUnitsOrAutoDefault: 'auto'Default: 'auto'
Adjust the inline size.
- Anchor to maxBlockSizemaxBlockSizemaxBlockSizeSizeUnitsOrNoneSizeUnitsOrNoneDefault: 'none'Default: 'none'
Adjust the maximum block size.
- Anchor to maxInlineSizemaxInlineSizemaxInlineSizeSizeUnitsOrNoneSizeUnitsOrNoneDefault: 'none'Default: 'none'
Adjust the maximum inline size.
- Anchor to minBlockSizeminBlockSizeminBlockSizeSizeUnitsSizeUnitsDefault: '0'Default: '0'
Adjust the minimum block size.
- Anchor to minInlineSizeminInlineSizeminInlineSizeSizeUnitsSizeUnitsDefault: '0'Default: '0'
Adjust the minimum inline size.
- Anchor to paddingpaddingpaddingMaybeAllValuesShorthandProperty<PaddingKeyword>MaybeAllValuesShorthandProperty<PaddingKeyword>Default: 'none'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:
largemeans block-start, inline-end, block-end and inline-start paddings arelarge.large nonemeans block-start and block-end paddings arelarge, inline-start and inline-end paddings arenone.large none largemeans block-start padding islarge, inline-end padding isnone, block-end padding islargeand inline-start padding isnone.large none large smallmeans block-start padding islarge, inline-end padding isnone, block-end padding islargeand inline-start padding issmall.
A padding value of
autowill use the default padding for the closest container that has had its usual padding removed.- 4 values:
- Anchor to paddingBlockpaddingBlockpaddingBlock'' | MaybeTwoValuesShorthandProperty<PaddingKeyword>'' | MaybeTwoValuesShorthandProperty<PaddingKeyword>Default: '' - meaning no overrideDefault: '' - meaning no override
Adjust the block-padding.
large nonemeans block-start padding islarge, block-end padding isnone.
This overrides the block value of
padding.- Anchor to paddingBlockEndpaddingBlockEndpaddingBlockEnd'' | PaddingKeyword'' | PaddingKeywordDefault: '' - meaning no overrideDefault: '' - meaning no override
Adjust the block-end padding.
This overrides the block-end value of
.- Anchor to paddingBlockStartpaddingBlockStartpaddingBlockStart'' | PaddingKeyword'' | PaddingKeywordDefault: '' - meaning no overrideDefault: '' - meaning no override
Adjust the block-start padding.
This overrides the block-start value of
.- Anchor to paddingInlinepaddingInlinepaddingInline'' | MaybeTwoValuesShorthandProperty<PaddingKeyword>'' | MaybeTwoValuesShorthandProperty<PaddingKeyword>Default: '' - meaning no overrideDefault: '' - meaning no override
Adjust the inline padding.
large nonemeans inline-start padding islarge, inline-end padding isnone.
This overrides the inline value of
padding.- Anchor to paddingInlineEndpaddingInlineEndpaddingInlineEnd'' | PaddingKeyword'' | PaddingKeywordDefault: '' - meaning no overrideDefault: '' - meaning no override
Adjust the inline-end padding.
This overrides the inline-end value of
.- Anchor to paddingInlineStartpaddingInlineStartpaddingInlineStart'' | PaddingKeyword'' | PaddingKeywordDefault: '' - meaning no overrideDefault: '' - meaning no override
Adjust the inline-start padding.
This overrides the inline-start value of
.
SizeUnitsOrAuto
SizeUnits | 'auto'SizeUnits
`${number}px` | `${number}%` | `0`SizeUnitsOrNone
SizeUnits | 'none'MaybeAllValuesShorthandProperty
T | `${T} ${T}` | `${T} ${T} ${T}` | `${T} ${T} ${T} ${T}`PaddingKeyword
SizeKeyword | 'none'SizeKeyword
'small-500' | 'small-400' | 'small-300' | 'small-200' | 'small-100' | 'small' | 'base' | 'large' | 'large-100' | 'large-200' | 'large-300' | 'large-400' | 'large-500'MaybeTwoValuesShorthandProperty
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
Create a scrollable content area
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.