滚动区域
特性
- 滚动条位于可滚动内容的上方，不占用空间。
- 滚动是原生的；没有通过CSS转换进行的底层位置移动。
- 仅在与控件交互时模拟指针行为，因此键盘控制不受影响。
- 支持从右到左的方向。
安装
从命令行安装此组件。
$ npm add reka-ui结构
导入所有部分并将其组合。
<script setup>
import { ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport } from 'reka-ui'
</script>
<template>
<ScrollAreaRoot>
<ScrollAreaViewport />
<ScrollAreaScrollbar orientation="horizontal">
<ScrollAreaThumb />
</ScrollAreaScrollbar>
<ScrollAreaScrollbar orientation="vertical">
<ScrollAreaThumb />
</ScrollAreaScrollbar>
<ScrollAreaCorner />
</ScrollAreaRoot>
</template>API 参考
根
包含滚动区域的所有部分。
| 属性 | 默认 | 类型 |
|---|---|---|
as | 'div' | AsTag | 组件此组件应渲染为的元素或组件。可通过 |
asChild | 布尔值更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。 阅读我们的 组合指南了解更多详情。 | |
dir | 'ltr' | 'rtl'适用时，组合框的阅读方向。 | |
scrollHideDelay | 600 | 数字如果 |
type | 'hover' | 'scroll' | 'always' | 'hover' | 'auto'描述滚动条可见性的性质，类似于 macOS 中的滚动条偏好设置控制原生滚动条的可见性。
|
| 方法 | 类型 |
|---|---|
scrollTop | () => void将视口滚动到顶部 |
scrollTopLeft | () => void将视口滚动到左上角 |
视口
滚动区域的视口区域。
| 属性 | 默认 | 类型 |
|---|---|---|
as | 'div' | AsTag | 组件此组件应渲染为的元素或组件。可通过 |
asChild | 布尔值更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。 阅读我们的 组合指南了解更多详情。 | |
nonce | string将向样式标签添加 |
滚动条
垂直滚动条。添加第二个带有 orientation prop 的 Scrollbar 以启用水平滚动。
| 属性 | 默认 | 类型 |
|---|---|---|
as | 'div' | AsTag | 组件此组件应渲染为的元素或组件。可通过 |
asChild | 布尔值更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。 阅读我们的 组合指南了解更多详情。 | |
forceMount | 布尔值当需要更多控制时，用于强制挂载。在与 Vue 动画库控制动画时很有用。 | |
orientation | 'vertical' | 'vertical' | 'horizontal'滚动条的方向 |
| 数据属性 | 值 |
|---|---|
[data-state] | "visible" | "hidden" |
[data-orientation] | "垂直" | "水平" |
滑块
在 ScrollAreaScrollbar 中使用的滑块。
| 属性 | 默认 | 类型 |
|---|---|---|
as | 'div' | AsTag | 组件此组件应渲染为的元素或组件。可通过 |
asChild | 布尔值更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。 阅读我们的 组合指南了解更多详情。 |
| 数据属性 | 值 |
|---|---|
[data-state] | "visible" | "hidden" |
角部
垂直和水平滚动条相交的角部。
| 属性 | 默认 | 类型 |
|---|---|---|
as | 'div' | AsTag | 组件此组件应渲染为的元素或组件。可通过 |
asChild | 布尔值更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。 阅读我们的 组合指南了解更多详情。 |
示例
自定义滚动
使用暴露的 viewport 在默认方法之外修改/设置滚动位置
<script setup lang="ts">
import { ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport } from 'reka-ui'
const scrollArea = useTemplateRef('scrollArea')
function scrollToBottom() {
const viewport = scrollArea.value?.viewport
if (viewport) {
const top = scrollArea.value?.$el.scrollHeight
container.scrollTo({
top,
behavior: 'smooth'
})
}
}
</script>
<template>
<ScrollAreaRoot ref="scrollArea">
<ScrollAreaViewport />
<ScrollAreaScrollbar orientation="horizontal">
<ScrollAreaThumb />
</ScrollAreaScrollbar>
<ScrollAreaScrollbar orientation="vertical">
<ScrollAreaThumb />
</ScrollAreaScrollbar>
<ScrollAreaCorner />
</ScrollAreaRoot>
</template>无障碍性
在大多数情况下，最好依赖原生滚动并使用 CSS 中可用的自定义选项。当这不足够时，ScrollArea 提供额外的可定制性，同时保持浏览器的原生滚动行为（以及无障碍功能，如键盘滚动）。
键盘交互
由于组件依赖于原生滚动，因此默认支持通过键盘滚动。具体的键盘交互可能因平台而异，因此我们在此不作具体说明，也不添加特定的事件监听器来处理通过按键事件进行的滚动。