使用原生功能的自定义样式可滚动区域。
排版的三个基本方面是可读性、易读性和美学。虽然在非技术意义上“可读”和“易读”通常可以互换使用，但在排版上它们是不同但相关的概念。
可读性描述了个别字符之间的区分程度。Walter Tracy将其描述为“可解读和可识别的质量”。例如，如果“b”和“h”，或者“3”和“8”在小尺寸下难以区分，这就是可读性的问题。
排版师关注可读性，因为他们的工作是选择正确的字体。Brush Script就是一个包含许多可能难以区分的字符的字体示例。选择字母大小写会影响排版的可读性，因为仅使用大写字母（全大写）会降低可读性。
<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>
该组件继承了来自滚动区域原语的 Root 和 Viewport 部分的属性。它支持 常见的边距属性。
| 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 属性控制滚动条手柄的大小。
<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 属性为手柄分配特定半径。
<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 属性限制可滚动轴。
<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>