# 滚动区域

使用原生功能的自定义样式可滚动区域。

```jsx
<ScrollArea type="always" scrollbars="vertical" style={{ height: 180 }}>
  <Box p="2" pr="8">
    <Heading size="4" mb="2" trim="start">
      排版工艺的原则
    </Heading>

    <Flex direction="column" gap="4">
      <Text as="p">
        排版的三个基本方面是可读性、易读性和美学。虽然在非技术意义上“可读”和“易读”通常可以互换使用，但在排版上它们是不同但相关的概念。
      </Text>

      <Text as="p">
        可读性描述了个别字符之间的区分程度。Walter
        Tracy将其描述为“可解读和可识别的质量”。例如，如果“b”和“h”，或者“3”和“8”在小尺寸下难以区分，这就是可读性的问题。
      </Text>

      <Text as="p">
        排版师关注可读性，因为他们的工作是选择正确的字体。Brush
        Script就是一个包含许多可能难以区分的字符的字体示例。选择字母大小写会影响排版的可读性，因为仅使用大写字母（全大写）会降低可读性。
      </Text>
    </Flex>
  </Box>
</ScrollArea>
```

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

该组件继承了来自滚动区域原语的 [Root](/primitives/docs/components/scroll-area#root) 和 [Viewport](/primitives/docs/components/scroll-area#viewport) 部分的属性。它支持 [常见的边距属性](/themes/docs/overview/layout#margin-props)。

| Prop         | Type                                                 | Default          |
| ------------ | ---------------------------------------------------- | ---------------- |
| `asChild`    | `boolean`                                            | No default value |
| `size`       | `Responsive<"1" \| "2" \| "3">`                      | `"1"`            |
| `radius`     | `"none" \| "small" \| "medium" \| "large" \| "full"` | No default value |
| `scrollbars` | `"vertical" \| "horizontal" \| "both"`               | `"both"`         |

## [示例](#示例)

### [大小](#大小)

使用 `size` 属性控制滚动条手柄的大小。

```jsx
<Flex direction="column" gap="2">
  <ScrollArea size="1" type="always" scrollbars="horizontal" style={{ width: 300, height: 12 }}>
    <Box width="800px" height="1px" />
  </ScrollArea>

  <ScrollArea size="2" type="always" scrollbars="horizontal" style={{ width: 350, height: 16 }}>
    <Box width="900px" height="1px" />
  </ScrollArea>

  <ScrollArea size="3" type="always" scrollbars="horizontal" style={{ width: 400, height: 20 }}>
    <Box width="1000px" height="1px" />
  </ScrollArea>
</Flex>
```

### [半径](#半径)

使用 `radius` 属性为手柄分配特定半径。

```jsx
<Flex direction="column" gap="3">
  <ScrollArea
    radius="none"
    type="always"
    scrollbars="horizontal"
    style={{ width: 350, height: 20 }}
  >
    <Box width="800px" height="1px" />
  </ScrollArea>

  <ScrollArea
    radius="full"
    type="always"
    scrollbars="horizontal"
    style={{ width: 350, height: 20 }}
  >
    <Box width="800px" height="1px" />
  </ScrollArea>
</Flex>
```

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

使用 `scrollbars` 属性限制可滚动轴。

```jsx
<Grid columns="2" gap="2">

	<ScrollArea type="always" scrollbars="vertical" style={{ height: 150 }}>

		<Flex p="2" pr="8" direction="column" gap="4">

			<Text size="2" trim="both">

				排版的三个基本方面是可读性、易读性和美学。虽然在非技术意义上“可读”和“易读”通常可以互换使用，但在排版上它们是不同但相关的概念。

			</Text>



			<Text size="2" trim="both">

				可读性描述了个别字符之间的区分程度。Walter Tracy将其描述为“可解读和可识别的质量”。例如，如果“b”和“h”，或者“3”和“8”在小尺寸下难以区分，这就是可读性的问题。

			</Text>

		</Flex>

	</ScrollArea>



	<ScrollArea type="always" scrollbars="horizontal" style={{ height: 150 }}>

		<Flex gap="4" p="2" width="700px">

			<Text size="2" trim="both">

				排版的三个基本方面是可读性、易读性和美学。虽然在非技术意义上“可读”和“易读”通常可以互换使用，但在排版上它们是不同但相关的概念。

			</Text>



			<Text size="2" trim="both">

				可读性描述了个别字符之间的区分程度。Walter Tracy将其描述为“可解读和可识别的质量”。例如，如果“b”和“h”，或者“3”和“8”在小尺寸下难以区分，这就是可读性的问题。

			</Text>

		</Flex>

	</ScrollArea>

</Flex>
```

<!--$-->

<!--/$-->