Skip to main content

ScrollBox

Use s-scroll-box to create scrollable areas for content that exceeds container bounds.

Anchor to propertiesProperties

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.

Was this section helpful?

Code

<s-scroll-box>
<s-choice-list multiple>
{data.map((item) => (
<s-choice value={item.value}>{item.label}</s-choice>
))}
</s-choice-list>
</s-scroll-box>

Preview