Scroll Area

Headless Scroll Area; covers CSS overflow, CSS overscroll-behavior, CSS scrollbar-gutter.

Minimal setup

Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).

vp install @vizejs/ui

Add the public import below to <script setup lang="ts">. Components provide behavior without styles; the preview uses optional Paper styles.

import { ScrollArea } from "@vizejs/ui/scroll-area";

Or copy the source into your project with vize lib pull scroll-area (see Source Distribution).

Try it

This is the basic example maintained with the component source, using the public package imports. The preview adds the optional Paper styles.

Open the interactive example · Styling these components

Copy the example

<!-- Focusable, labelled scroll region with a fixed block size so its content overflows. -->
<script setup lang="ts">
import { useId } from "vue";

import { ScrollArea } from "@vizejs/ui/scroll-area";

const titleId = useId();
const releases = ["2.4.0", "2.3.2", "2.3.1", "2.3.0", "2.2.0", "2.1.1", "2.1.0", "2.0.0"];
</script>

<template>
  <div>
    <h2 :id="titleId">Changelog</h2>
    <ScrollArea block-size="8rem" focusable :aria-labelledby="titleId">
      <ul>
        <li v-for="release in releases" :key="release">Version {{ release }}</li>
      </ul>
    </ScrollArea>
  </div>
</template>

API

ScrollArea

Source: src/families/layout/scroll-area/scroll-area.vue

Props

Events

Slots

Exposed

Behavior

Normative state x input -> outcome table for scroll-area.vue (@vizejs/ui/scroll-area). Every row is proven by the named mounted-DOM, SSR, runtime-conformance, renderer, or packaging test. A row without a passing test is a contract violation.

Props

Emits

Slots

Expose

Data Attributes

CSS Custom Properties

Parts