定价

ScrollArea

Figma 源代码

为内容提供可滚动区域与统一的滚动条，适合长列表、面板和受限空间中的正文。

我们正在让 SnowUI 组件成为 AI 对话中可直接操作的界面。目前对话交互能力仍在建设中；本页展示网站用法，支持的对话平台与组件版本将在验证后公布。 AI 对话内生成和使用 SnowUI 界面完全免费，不属于项目，不占项目或开发者席位额度，无需 SnowUI 注册、激活或付费证明。

如何使用

用于需要独立滚动的区域。页面不应无意创建多层嵌套滚动；表格的局部横向滚动优先沿用 Table。

  • axis 选择滚动方向；内容或宿主需要有限尺寸才能形成滚动区域。

  • bind:viewport 获取实际滚动元素，onscroll 接收滚动事件；用 ariaLabel 描述区域用途。

  • 滚动viewport默认名称随LocaleProvider更新，显式ariaLabel优先；children保持调用方内容。

导入

import { ScrollArea } from '@snowui-design-system/components';

用法

水平布局

水平滚动条可见性

双轴

API 参考

属性 类型 默认值 示例 描述
axis ScrollAreaAxis "vertical" axis={value} 允许滚动的方向
horizontalTrackPosition ScrollAreaHorizontalTrackPosition "container" horizontalTrackPosition={value} 横向轨道停靠在容器底边，或在长容器经过页面视口时贴近视口底部
horizontalScrollbarVisibility "always" | "hover" "always" horizontalScrollbarVisibility="always" 横向滚动条在内容溢出时常显，或仅在鼠标移入区域时显示
ariaLabel string — ariaLabel="Example" viewport 的无障碍标签；省略时随LocaleProvider更新，显式ariaLabel优先；viewport 使用 role="region"
viewport HTMLElement — bind:viewport={viewport} 暴露内部可滚动 viewport，供读取或设置原生滚动位置
onscroll (event: Event) => void — onscroll={(value) => { /* handle value */ }} viewport 原生 scroll 事件
children Snippet — <ScrollArea>Content</ScrollArea> 任意可滚动内容