# 滚动区域

增强自定义跨浏览器样式的本地滚动功能。

## Features

- 滚动条位于可滚动内容之上，不占用空间。

- 滚动是原生的；没有通过 CSS 变换导致的底层位置移动。

- 仅在与控件交互时调整指针行为，因此键盘控制不受影响。

- 支持从右到左的方向。

## [结构](#结构)

导入所有部分并组装在一起。

```jsx
import { ScrollArea } from "radix-ui";

export default () => (
  <ScrollArea.Root>
    <ScrollArea.Viewport />

    <ScrollArea.Scrollbar orientation="horizontal">
      <ScrollArea.Thumb />
    </ScrollArea.Scrollbar>

    <ScrollArea.Scrollbar orientation="vertical">
      <ScrollArea.Thumb />
    </ScrollArea.Scrollbar>

    <ScrollArea.Corner />
  </ScrollArea.Root>
);
```

## [API 参考](#api-参考)

### [根](#根)

包含滚动区域的所有部分。

| Prop              | Type      | Default          |
| ----------------- | --------- | ---------------- |
| `asChild`         | `boolean` | `false`          |
| `type`            | `enum`    | `"hover"`        |
| `scrollHideDelay` | `number`  | `600`            |
| `dir`             | `enum`    | No default value |
| `nonce`           | `string`  | No default value |

### [视口](#视口)

滚动区域的视口区域。

| Prop      | Type      | Default |
| --------- | --------- | ------- |
| `asChild` | `boolean` | `false` |

### [滚动条](#滚动条)

垂直滚动条。添加第二个 `Scrollbar` 并设置 `orientation` 属性以启用水平滚动。

| Prop          | Type      | Default          |
| ------------- | --------- | ---------------- |
| `asChild`     | `boolean` | `false`          |
| `forceMount`  | `boolean` | No default value |
| `orientation` | `enum`    | `vertical`       |

| Data attribute       | Values                       |
| -------------------- | ---------------------------- |
| `[data-state]`       | `"visible" \| "hidden"`      |
| `[data-orientation]` | `"vertical" \| "horizontal"` |

### [拇指](#拇指)

在 `ScrollArea.Scrollbar` 中使用的拇指。

| Prop      | Type      | Default |
| --------- | --------- | ------- |
| `asChild` | `boolean` | `false` |

| Data attribute | Values                  |
| -------------- | ----------------------- |
| `[data-state]` | `"visible" \| "hidden"` |

### [角落](#角落)

垂直和水平滚动条交汇的角落。

| Prop      | Type      | Default |
| --------- | --------- | ------- |
| `asChild` | `boolean` | `false` |

## [无障碍性](#无障碍性)

在大多数情况下，最好依靠原生滚动并使用 CSS 中的自定义选项。当这些不足够时，`ScrollArea` 提供了额外的可定制性，同时保持浏览器的原生滚动行为（以及可访问性功能，如键盘滚动）。

### [键盘交互](#键盘交互)

通过键盘滚动默认受到支持，因为该组件依赖于原生滚动。特定的键盘交互可能因平台而异，因此我们在这里不具体说明它们或添加特定的事件监听器来处理键盘事件的滚动。

<!--$-->

<!--/$-->