ScrollArea

Thin scrollbar + fade

A box that scrolls on its own inside a page — a long list in a sidebar, a code block, a wide table. Prefer letting the page scroll; nested scrolling is easy to get stuck in on phones.

Basic

第1話 — vertical, thin scrollbar, faded edges

第2話 — vertical, thin scrollbar, faded edges

第3話 — vertical, thin scrollbar, faded edges

第4話 — vertical, thin scrollbar, faded edges

第5話 — vertical, thin scrollbar, faded edges

第6話 — vertical, thin scrollbar, faded edges

第7話 — vertical, thin scrollbar, faded edges

第8話 — vertical, thin scrollbar, faded edges

第9話 — vertical, thin scrollbar, faded edges

第10話 — vertical, thin scrollbar, faded edges

第11話 — vertical, thin scrollbar, faded edges

第12話 — vertical, thin scrollbar, faded edges

chip 1chip 2chip 3chip 4chip 5chip 6chip 7chip 8chip 9chip 10chip 11chip 12

<script setup lang="ts">
import { BlessScrollArea } from "blessing-ui";
</script>

<template>
  <div class="row" style="align-items: flex-start">
    <BlessScrollArea
      height="140px"
      width="320px"
      style="background: var(--bless-color-surface); padding: 12px"
    >
      <p v-for="n in 12" :key="n" style="margin: 0 0 8px">
        第{{ n }}話 — vertical, thin scrollbar, faded edges
      </p>
    </BlessScrollArea>
    <BlessScrollArea
      axis="x"
      width="320px"
      style="background: var(--bless-color-surface); padding: 12px"
    >
      <div style="display: flex; gap: 8px; width: max-content">
        <span v-for="n in 12" :key="n" style="padding: 8px 16px; background: var(--bless-color-bg)"
          >chip {{ n }}</span
        >
      </div>
    </BlessScrollArea>
  </div>
</template>

• It is focusable so keyboard users can scroll it with the arrows. Give it a label and it becomes a named region, so that stop is announced as something.
• axis picks the scroll direction; fade shades the edges while there's more to see.

Usage

import { BlessScrollArea } from "blessing-ui";

API

Props

Name	Type	Default	Description
axis	"x" | "y" | "both"	"y"
fade	boolean	true	fade edges to hint overflow
height	string	—
width	string	—
label	string	—	names the area; it is focusable so the keyboard can scroll it, and a stop needs a name

Slots

Name	Scope	Description
default	—