ScrollArea 滚动区域

包裹内容并接管滚动条外观的容器：细条自定义滚动条、hover 变粗，auto-hide 时仅在滚动/悬停时显示，滚动事件节流派发。

基础用法

height 固定视口高度，超出部分纵向滚动；滚动条细条展示，hover 变粗。

定高滚动

第 1 行内容：ScrollArea 支持自定义滚动条外观

第 2 行内容：细条 + hover 变粗

第 3 行内容：滚动事件节流派发 oas-scroll

第 4 行内容：wheel 平滑滚动

第 5 行内容：支持 auto-hide 自动隐藏

第 6 行内容：横向内容同样接管滚动条

第 7 行内容：颜色走主题 token

第 8 行内容：适合列表、日志、长文案

第 9 行内容：内容不足时不显示滚动条

第 10 行内容：自定义内容插槽

示例代码

宽度与横向滚动

width 固定视口宽度，宽内容产生横向滚动条。

横向滚动

卡片 1

卡片 2

卡片 3

卡片 4

卡片 5

卡片 6

示例代码

auto-hide

auto-hide 时滚动条平时隐藏，滚动或悬停视口时显示，停止后自动淡出。

auto-hide

滚动我看看滚动条：平时隐藏，滚动时出现

停下来等一秒，滚动条自动淡出

悬停在区域内也会临时显示

适合不希望滚动条干扰阅读的界面

移动端卡片列表场景推荐使用

示例代码

滚动事件

滚动事件按 rAF 节流派发 oas-scroll，detail 携带 { scrollTop, scrollLeft }。

oas-scroll 事件

第 1 行：滚动事件节流派发

第 2 行：detail 包含 scrollTop / scrollLeft

第 3 行：适合做滚动监听、懒加载

第 4 行：与虚拟列表滚动逻辑互补

第 5 行：滚动条位置同步更新

第 6 行：继续滚动查看输出

第 7 行：节流避免高频事件

第 8 行：最后一个示例

scrollTop：0

示例代码

API

属性

属性	说明	类型	默认值
auto-hide	滚动条仅在滚动/悬停时显示，超时自动隐藏	boolean	—
height	视口高度（px），不设置时随内容自然撑开	—	—
width	视口宽度（px），不设置时铺满宿主宽度	—	—

事件

事件	说明
oas-scroll	滚动事件（rAF 节流），detail: { scrollTop, scrollLeft }

插槽

名称	说明
默认	—

部件：::part(viewport) 滚动视口、::part(track-v) / ::part(track-h) 滚动轨道、::part(thumb-v) / ::part(thumb-h) 滚动块。视口可聚焦（tabindex="0"），方向键滚动。