#滚动区域
滚动区域限制长内容的可视范围，同时保留内容顺序和可发现的滚动行为。
标签
v1.2.0-beta.50
v1.2.0-beta.49
v1.2.0-beta.48
v1.2.0-beta.47
v1.2.0-beta.46
v1.2.0-beta.45
v1.2.0-beta.44
v1.2.0-beta.43
v1.2.0-beta.42
v1.2.0-beta.41
v1.2.0-beta.40
v1.2.0-beta.39
v1.2.0-beta.38
安装Terminal
npm install @a3s-lab/ui<div class="scrollbar h-72 overflow-y-auto rounded-md border p-4">
Your scrollable content here.
</div>import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";#用法
引入 CSS
导入 Tailwind 和一个完整的 A3S UI 样式包。
@import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";或者仅导入基本CSS和一个样式包。
@import "tailwindcss";
@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/styles/a3s.css";区域滚动使用 A3S UI 滚动条工具类（.scrollbar / .scrollbar-sm）。
使用CDN或批量程序导入？请参见安装页。
添加滚动区域 HTML
在已使用 overflow-auto、overflow-y-auto 或 overflow-x-auto 滚动的元素上使用 scrollbar 或 scrollbar-sm。
<div class="scrollbar h-72 overflow-y-auto rounded-md border p-4">
Your scrollable content here.
</div>在已使用 overflow-auto、overflow-y-auto 或 overflow-x-auto 滚动的元素上使用 scrollbar 或 scrollbar-sm。
工具类增强了原生滚动的跨浏览器样式。它不封装内容、取代浏览器滚动行为或需要 JavaScript。需要键盘滚动的宿主应保持 overflow 元素可聚焦（tabindex="0" 或原生控件）。React/Vue 的 ScrollArea 导出在下一主版本迁移前仅作为兼容别名保留。
#示例
这些示例使用卡片作为框架表面，因此源自半径活动样式包。
#卧式
将 scrollbar 与 overflow-x-auto 结合使用以实现水平滚动。
<div class="card w-full max-w-sm p-0">
<div class="scrollbar overflow-x-auto">
<div class="flex w-max gap-4 p-4">
<figure class="shrink-0">
<div class="aspect-[3/4] w-40 rounded-md bg-muted"></div>
<figcaption class="text-muted-foreground pt-2 text-xs">Photo by Ornella Binni</figcaption>
</figure>
<figure class="shrink-0">
<div class="aspect-[3/4] w-40 rounded-md bg-muted"></div>
<figcaption class="text-muted-foreground pt-2 text-xs">Photo by Tom Byrom</figcaption>
</figure>
<figure class="shrink-0">
<div class="aspect-[3/4] w-40 rounded-md bg-muted"></div>
<figcaption class="text-muted-foreground pt-2 text-xs">Photo by Vladimir Malyavko</figcaption>
</figure>
</div>
</div>
</div>#薄型
将 scrollbar-sm 用于紧凑的可滚动区域，例如菜单、列表框、侧边栏和命令结果。
Recent files
<div class="card w-full max-w-sm p-1">
<div class="px-2 py-1.5 text-xs font-medium text-muted-foreground">Recent files</div>
<div class="scrollbar-sm max-h-48 overflow-y-auto">
<button type="button" class="flex w-full items-center justify-between rounded-sm px-2 py-1.5 text-sm hover:bg-accent">
<span>project-roadmap.md</span>
<span class="text-xs text-muted-foreground">2m</span>
</button>
<button type="button" class="flex w-full items-center justify-between rounded-sm px-2 py-1.5 text-sm hover:bg-accent">
<span>release-notes.md</span>
<span class="text-xs text-muted-foreground">8m</span>
</button>
<button type="button" class="flex w-full items-center justify-between rounded-sm px-2 py-1.5 text-sm hover:bg-accent">
<span>api-contract.json</span>
<span class="text-xs text-muted-foreground">16m</span>
</button>
<button type="button" class="flex w-full items-center justify-between rounded-sm px-2 py-1.5 text-sm hover:bg-accent">
<span>pricing-table.html</span>
<span class="text-xs text-muted-foreground">1h</span>
</button>
<button type="button" class="flex w-full items-center justify-between rounded-sm px-2 py-1.5 text-sm hover:bg-accent">
<span>onboarding-flow.md</span>
<span class="text-xs text-muted-foreground">2h</span>
</button>
<button type="button" class="flex w-full items-center justify-between rounded-sm px-2 py-1.5 text-sm hover:bg-accent">
<span>settings-panel.ts</span>
<span class="text-xs text-muted-foreground">3h</span>
</button>
<button type="button" class="flex w-full items-center justify-between rounded-sm px-2 py-1.5 text-sm hover:bg-accent">
<span>invoice-template.html</span>
<span class="text-xs text-muted-foreground">5h</span>
</button>
</div>
</div>#RTL
在可滚动元素或其祖先之一上设置 dir="rtl" 以使用从右到左布局。
العلامات
v1.2.0-beta.50
v1.2.0-beta.49
v1.2.0-beta.48
v1.2.0-beta.47
v1.2.0-beta.46
v1.2.0-beta.45
v1.2.0-beta.44
v1.2.0-beta.43
v1.2.0-beta.42
v1.2.0-beta.41
v1.2.0-beta.40
v1.2.0-beta.39
v1.2.0-beta.38
<div class="card h-72 p-0">
<div dir="rtl" class="scrollbar h-full overflow-y-auto p-4">
<div class="space-y-4">
<h4 class="text-sm leading-none font-medium">العلامات</h4>
<div class="text-sm">
<div class="border-b py-2">v1.2.0-beta.50</div>
<div class="border-b py-2">v1.2.0-beta.49</div>
<div class="border-b py-2">v1.2.0-beta.48</div>
<div class="border-b py-2">v1.2.0-beta.47</div>
<div class="border-b py-2">v1.2.0-beta.46</div>
<div class="border-b py-2">v1.2.0-beta.45</div>
<div class="border-b py-2">v1.2.0-beta.44</div>
<div class="border-b py-2">v1.2.0-beta.43</div>
<div class="border-b py-2">v1.2.0-beta.42</div>
<div class="border-b py-2">v1.2.0-beta.41</div>
<div class="border-b py-2">v1.2.0-beta.40</div>
<div class="border-b py-2">v1.2.0-beta.39</div>
<div class="py-2">v1.2.0-beta.38</div>
</div>
</div>
</div>
</div>