SScrollBox <s-scroll-box>

import { SScrollBox } from 'polaris-vue-elements'

Example

Scrollable row 1Scrollable row 2Scrollable row 3Scrollable row 4Scrollable row 5Scrollable row 6Scrollable row 7Scrollable row 8

<script setup>
import { SScrollBox, SBox, SText } from 'polaris-vue-elements'
</script>

<template>
  <!-- maxBlockSize only accepts the "none"/"0" keywords, so an arbitrary pixel cap is
       set as a plain style attribute (it passes through untyped, see the quirks guide). -->
  <SScrollBox
    style="max-height: 160px"
    overflow="auto"
    border="base"
    borderRadius="200"
    padding="base"
  >
    <SBox
      v-for="n in 8"
      :key="n"
      padding="small"
      paddingBlockEnd="small"
      borderColor="subdued"
      borderWidth="small"
      borderStyle="solid"
    >
      <SText>Scrollable row {{ n }}</SText>
    </SBox>
  </SScrollBox>
</template>

Props

Prop	Type	Description
accessibilityLabel	string	A label used to describe the scroll container for assistive technologies.
accessibilityRole	"generic" | "region"	Sets the semantic meaning of the component's content.
accessibilityVisibility	"visible" | "hidden" | "exclusive"	Changes the visibility of the element. - visible: the element is visible to all users. - hidden: the element is removed from the accessibility tree but remains visible. - exclusive: the element is visually hidden but remains in the accessibility tree.
background	"subdued" | "base" | "strong" | "transparent"	Adjust the background of the component.
blockSize	"auto" | "0"	Adjust the block size.
border	BorderShorthand	Set the border via the shorthand property. This can be a size, optionally followed by a color, optionally followed by a style. If the color is not specified, it will be base. If the style is not specified, it will be auto. Values can be overridden by borderWidth, borderStyle, and borderColor.
borderColor	"subdued" | "base" | "strong"	Adjust the color of the border.
borderRadius	MaybeAllValuesShorthandProperty<BoxBorderRadii>	Adjust the radius of the border.
borderStyle	"" | MaybeAllValuesShorthandProperty<BoxBorderStyles>	Adjust the style of the border.
borderWidth	"" | MaybeAllValuesShorthandProperty<"base" | "small" | "small-100" | "large" | "large-100" | "none">	Adjust the width of the border.
display	"auto" | "none"	Sets the outer display type of the component. The outer type sets a component's participation in flow layout. - auto the component's initial value. The actual value depends on the component and context. - none hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.
inlineSize	"auto" | "0"	Adjust the inline size.
maxBlockSize	"none" | "0"	Adjust the maximum block size.
maxInlineSize	"none" | "0"	Adjust the maximum inline size.
minBlockSize	"0"	Adjust the minimum block size.
minInlineSize	"0"	Adjust the minimum inline size.
overflow	"auto" | "hidden" | "auto auto" | "auto hidden" | "hidden auto" | "hidden hidden"	Sets the overflow behavior of the element.
padding	MaybeResponsive<MaybeAllValuesShorthandProperty<PaddingKeyword>>	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. padding also accepts a responsive value string with the supported PaddingKeyword as a query value.
paddingBlock	MaybeResponsive<"" | MaybeTwoValuesShorthandProperty<PaddingKeyword>>	Adjust the block-padding. - large none means block-start padding is large, block-end padding is none. This overrides the block value of padding. paddingBlock also accepts a responsive value string with the supported PaddingKeyword as a query value.
paddingBlockEnd	"base" | "small" | "small-500" | "small-400" | "small-300" | "small-200" | "small-100" | "large" … (6 more)	Adjust the block-end padding. This overrides the block-end value of paddingBlock. paddingBlockEnd also accepts a responsive value string with the supported PaddingKeyword as a query value.
paddingBlockStart	"base" | "small" | "small-500" | "small-400" | "small-300" | "small-200" | "small-100" | "large" … (6 more)	Adjust the block-start padding. This overrides the block-start value of paddingBlock. paddingBlockStart also accepts a responsive value string with the supported PaddingKeyword as a query value.
paddingInline	MaybeResponsive<"" | MaybeTwoValuesShorthandProperty<PaddingKeyword>>	Adjust the inline padding. - large none means inline-start padding is large, inline-end padding is none. This overrides the inline value of padding. paddingInline also accepts a responsive value string with the supported PaddingKeyword as a query value.
paddingInlineEnd	"base" | "small" | "small-500" | "small-400" | "small-300" | "small-200" | "small-100" | "large" … (6 more)	Adjust the inline-end padding. This overrides the inline-end value of paddingInline. paddingInlineEnd also accepts a responsive value string with the supported PaddingKeyword as a query value.
paddingInlineStart	"base" | "small" | "small-500" | "small-400" | "small-300" | "small-200" | "small-100" | "large" … (6 more)	Adjust the inline-start padding. This overrides the inline-start value of paddingInline. paddingInlineStart also accepts a responsive value string with the supported PaddingKeyword as a query value.
scrollMargin	"0" | "0 0" | "0 0 0" | "0 0 0 0"	Scroll margin for the element (CSS-like 1-to-4-value shorthand syntax).
scrollPadding	"base" | "small" | "small-500" | "small-400" | "small-300" | "small-200" | "small-100" | "large" … (6 more)	Offset for scroll snap alignment points.
snapType	"none" | "mandatory" | "proximity"	Controls scroll snap behavior.

Some type columns above are truncated for readability; the full union is available in the library's generated TypeScript types (src/lib/generated/types.ts).

Events

Event	Type
scroll	CustomEvent
scrolltoedge	CustomEvent

Listen for these with @scroll-style listeners on <SScrollBox>.

Slots

Slot	Description
default	The content of the ScrollBox.