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"	The background color of the component.
blockSize	"auto" | "0"	The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes). Block size adjusts based on the writing direction: in horizontal layouts, it controls the height; in vertical layouts, it controls the width. This ensures consistent behavior across different text directions. Learn more about block-size.
border	BorderShorthand	A border applied using shorthand syntax to specify width, color, and style in a single property.
borderColor	"subdued" | "base" | "strong"	The color of the border using the design system's color scale. When set, this overrides the color value specified in the border property. Choose from subdued, base, or strong to match the visual emphasis needed.
borderRadius	MaybeAllValuesShorthandProperty<BoxBorderRadii>	The roundedness of the element's corners using the design system's radius scale. Supports 1-to-4-value syntax for specifying different radii per corner. Use this to create rounded corners or fully rounded elements.
borderStyle	"" | MaybeAllValuesShorthandProperty<BoxBorderStyles>	The visual style of the border on all sides, such as solid, dashed, or dotted. When set, this overrides the style value specified in the border property. Supports 1-to-4-value syntax for specifying different styles per side.
borderWidth	"" | MaybeAllValuesShorthandProperty<"base" | "small-100" | "small" | "large" | "large-100" | "none">	The thickness of the border on all sides. When set, this overrides the width value specified in the border property. Supports 1-to-4-value syntax for specifying different widths per side.
display	"auto" | "none"	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"	The width in horizontal writing modes, or height in vertical writing modes. Use this for flow-relative sizing that adapts to text direction. Learn more about inline-size.
maxBlockSize	"none" | "0"	The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size. Learn more about max-block-size.
maxInlineSize	"none" | "0"	The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size. Learn more about max-inline-size.
minBlockSize	"0"	The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size. Learn more about min-block-size.
minInlineSize	"0"	The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size. Learn more about min-inline-size.
overflow	"auto" | "hidden" | "auto auto" | "auto hidden" | "hidden auto" | "hidden hidden"	Sets the overflow behavior of the element.
padding	MaybeResponsive<MaybeAllValuesShorthandProperty<PaddingKeyword>>	The padding applied to all edges of the component. Supports 1-to-4-value syntax using flow-relative values: - 1 value applies to all sides - 2 values apply to block (top/bottom) and inline (left/right) - 3 values apply to block-start (top), inline (left/right), and block-end (bottom) - 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left) Examples:* base, large none, base large-100 base small Use auto to inherit padding from the nearest container with removed padding. Also accepts a responsive value string with the supported PaddingKeyword as a query value.
paddingBlock	MaybeResponsive<"" | MaybeTwoValuesShorthandProperty<PaddingKeyword>>	The block-direction padding (top and bottom in horizontal writing modes). Accepts a single value for both sides or two space-separated values for block-start and block-end. Example:* large none applies large to the top and none to the bottom. Overrides the block value from padding. Also accepts a responsive value string with the supported PaddingKeyword as a query value.
paddingBlockEnd	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "large-200" | "large-300" … (6 more)	The block-end padding (bottom in horizontal writing modes). Overrides the block-end value from paddingBlock. Also accepts a responsive value string with the supported PaddingKeyword as a query value.
paddingBlockStart	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "large-200" | "large-300" … (6 more)	The block-start padding (top in horizontal writing modes). Overrides the block-start value from paddingBlock. Also accepts a responsive value string with the supported PaddingKeyword as a query value.
paddingInline	MaybeResponsive<"" | MaybeTwoValuesShorthandProperty<PaddingKeyword>>	The inline-direction padding (left and right in horizontal writing modes). Accepts a single value for both sides or two space-separated values for inline-start and inline-end. Example:* large none applies large to the left and none to the right. Overrides the inline value from padding. Also accepts a responsive value string with the supported PaddingKeyword as a query value.
paddingInlineEnd	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "large-200" | "large-300" … (6 more)	The inline-end padding (right in LTR writing modes, left in RTL). Overrides the inline-end value from paddingInline. Also accepts a responsive value string with the supported PaddingKeyword as a query value.
paddingInlineStart	"base" | "small-200" | "small-100" | "small" | "large" | "large-100" | "large-200" | "large-300" … (6 more)	The inline-start padding (left in LTR writing modes, right in RTL). Overrides the inline-start value from paddingInline. 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-200" | "small-100" | "small" | "large" | "large-100" | "large-200" | "large-300" … (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.