Raft 设计系统
English

组件 · 布局

ScrollArea

A region with native scrolling and a thin drawn scrollbar that shows only while it scrolls, for lists and strips inside a fixed frame.

稳定也叫 Scrollbar, Scroll view
import { ScrollArea } from "@botiverse/raft-ui";
本页尚未翻译
译文完成之前，这里显示英文原文。 阅读英文版

ScrollArea scrolls its content natively and draws a thin scrollbar over the edge that shows only while the content moves, so the scrollbar takes no room from the layout. raft-ui uses it for the desktop message list, the sidebar and the composer's row of attachments.

scroll-area/compositions/basic

When to use

SituationUse
A list or strip that scrolls inside a fixed frameScrollArea
The content of a panel under its headerPanelScrollViewport (Panel)
The messages of a conversation or a threadMessageList, which is built on ScrollArea
A row of tabs that doesn't fitTabs, which scrolls on its own
A Markdown table wider than the textMarkdownTableScroll (Markdown)

Anatomy

  • ScrollArea: the frame. Give it the size of the region. Required.
  • ScrollAreaViewport: the element that scrolls. Required.
  • ScrollAreaContent: the content, at least as tall as the viewport. Required.
  • ScrollAreaScrollbar: a track over one edge, vertical by default. Add a second with orientation="horizontal" for content that scrolls both ways.
  • ScrollAreaThumb: the 6px handle in the track, in translucent ink. Required inside each scrollbar.
  • ScrollAreaCorner: the square where two scrollbars meet. Only with both.
scroll-area/compositions/both-axes

States

StateLook
At restNo scrollbar. The track doesn't catch the pointer
ScrollingThe scrollbar shows at once and fades out after the scrolling stops
Thumb hoverThe thumb darkens

Behavior

  • Scrolling is the browser's own: wheel, trackpad, touch and keyboard scroll the viewport as usual.
  • Scrolling stops at the end of the area and doesn't carry on to the page behind it.
  • The viewport keeps the visible content in place when content above it changes size.

Accessibility

  • ScrollArea wraps Base UI ScrollArea. The viewport becomes focusable while its content overflows, so keyboard users can scroll it with the arrow keys, Page Up and Page Down.
  • The viewport has no role of its own. Name and structure the content inside it, such as a list with an aria-label.

Rules

  • Give each region one scroll container: the header stays put and only the content scrolls (Panel).
  • Size the frame, not the content: a ScrollArea without a height grows with its content and never scrolls.

API

ScrollArea

Prop类型默认值
overflowEdgeThresholdThe threshold in pixels that must be passed before the overflow edge attributes are applied. Accepts a single number for all edges or an object to configure them individually.number | Partial<{ xStart: number; xEnd: number; yStart: number; yEnd: number; }>0
renderAllows you to replace the component's HTML element with a different tag, or compose it with another component.ReactElement | ((props, state) => ReactElement)

Also takes the attributes of its element.

ScrollAreaContent, ScrollAreaCorner

Prop类型默认值
renderAllows you to replace the component's HTML element with a different tag, or compose it with another component.ReactElement | ((props, state) => ReactElement)

Also takes the attributes of its element.

ScrollAreaScrollbar

Prop类型默认值
keepMountedWhether to keep the HTML element in the DOM when the viewport isn't scrollable.booleanfalse
orientationWhether the scrollbar controls vertical or horizontal scroll."horizontal" | "vertical""vertical"
renderAllows you to replace the component's HTML element with a different tag, or compose it with another component.ReactElement | ((props, state) => ReactElement)

Also takes the attributes of its element.

ScrollAreaThumb, ScrollAreaViewport

Prop类型默认值
renderAllows you to replace the component's HTML element with a different tag, or compose it with another component.ReactElement | ((props, state) => ReactElement)

Also takes the attributes of its element.

相关组件

改动

  • 0.5.53 · FixedMessageList no longer lets wide content (a w-max tab strip, a long code line) stretch every message past a narrow list on a desktop viewport: its ScrollAreaContent resets Base UI's inline min-width: fit-content to 0, so the content keeps the list width and wide children scroll inside their own box.
  • 0.1.0 · AddedAdded ConversationPanel, ThreadPanel, Panel, ScrollArea, FilePreview, RaftLogo / lockup / wordmark, and MobileNav.