Scroll Area

SScrollArea is a region that scrolls its content behind thin overlay scrollbars. Native scrollbars differ between platforms — wide and always present on Windows, hidden until you scroll on macOS — and a sidebar or a dialog body that changes width with the operating system is hard to lay out. The component hides the native bars and draws its own on top of the content, so the area keeps the same width everywhere and the bar follows the design tokens.

Scrolling itself stays native: the region is focusable, so the arrow keys, Page Up/Page Down, Home/End, the mouse wheel and touch gestures all work as usual, and screen readers announce the region as scrollable.

Give the area a height (height or max-height, or your own layout) — without one it is as tall as its content and never scrolls.

Vertical list

<template>
  <SScrollArea :height="200">
    <div
      v-for="i in 20"
      :key="i"
    >
      Release 1.{{ i }}.0
    </div>
  </SScrollArea>
</template>

Horizontal

Set orientation to horizontal to scroll a row instead. Only the named axis gets a scrollbar, so the content has to be allowed to overflow on it.

<template>
  <SScrollArea orientation="horizontal">
    <div style="display: flex; gap: 8px">
      <div
        v-for="i in 12"
        :key="i"
      >
        Tile {{ i }}
      </div>
    </div>
  </SScrollArea>
</template>

Both axes

orientation="both" renders both scrollbars and the corner between them — for a table or a diagram that is larger than its container in every direction.

<template>
  <SScrollArea
    orientation="both"
    :height="200"
  >
    <div style="width: 640px">…</div>
  </SScrollArea>
</template>

Visibility and thickness

type decides when the scrollbars are on screen: hover (the default) shows them while you scroll or point at the area, scroll only while scrolling, auto whenever the content overflows, and always at all times. With hover and scroll, scroll-hide-delay sets how long they linger afterwards. size picks the thickness of the bar.

<template>
  <SScrollArea
    type="always"
    size="sm"
    :height="160"
  >
    …
  </SScrollArea>

  <SScrollArea
    type="always"
    size="lg"
    :height="160"
  >
    …
  </SScrollArea>
</template>

API

Props

Name	Type	Default	Description
type	| "auto" | "hover" | "always" | "scroll"	"hover"	When the scrollbars are visible: auto — while the content overflows, always — at all times, scroll — while scrolling, hover — while scrolling or pointing at the area.
scroll-hide-delay	number	600	How long the scrollbars stay visible after the interaction ends, in milliseconds (scroll and hover only).
orientation	| "horizontal" | "vertical" | "both"	"vertical"	Which scrollbars are rendered. The other axis keeps its content instead of scrolling it.
height	string | number	undefined	Height of the area; a number means pixels. Without it (and without maxHeight) the area is as tall as its content, and the size comes from the consumer's own layout.
max-height	string | number	undefined	Height the area is allowed to grow to before it starts scrolling; a number means pixels.
size	"md" | "sm" | "lg"	"md"	Scrollbar thickness.

Slots

Name	Description
default	Content of the scrollable region.