AScrollArea
AScrollArea is a scrollable region with a fixed or max height. Use it to constrain long content — sidebars, log panels, option lists — inside a bounded box.
Import
import { ScrollArea, ScrollFade } from '@any-design/anyui/vue';
// React: import { ScrollArea, ScrollFade } from '@any-design/anyui/react';
// Svelte: import { ScrollArea, ScrollFade } from '@any-design/anyui/svelte';Basic usage
<template>
<AScrollArea height="240">
<p v-for="i in 50" :key="i">Line {{ i }}</p>
</AScrollArea>
</template>Examples
Max height with fill
maxHeight lets the area grow up to a limit; fill stretches it to fill its parent’s height.
<template>
<AScrollArea max-height="320" fill>
<p v-for="i in 100" :key="i">Line {{ i }}</p>
</AScrollArea>
</template>Horizontal scroll
Set horizontal to allow horizontal scrolling for wide content.
<template>
<AScrollArea height="120" horizontal>
<div style="width: 1600px">Very wide content…</div>
</AScrollArea>
</template>Scroll fade
Set scrollFade to fade the scrollable edges. It uses the same CSS mask approach as shadcn’s scroll-fade utility: supported browsers reveal the top / bottom / side fade only when there is more content in that direction, and older browsers fall back to a static edge fade.
<template>
<AScrollArea height="240" scroll-fade>
<p v-for="i in 50" :key="i">Line {{ i }}</p>
</AScrollArea>
</template>Pass an object to tune the fade size or reveal distance.
<template>
<AScrollArea
height="120"
horizontal
:scroll-fade="{ size: 32, reveal: 96 }"
>
<div style="width: 1600px">Very wide content…</div>
</AScrollArea>
</template>ScrollFade wrapper
AScrollFade is a higher-order scroll container for any content that needs only the fade mask and native scrolling.
<template>
<AScrollFade height="240" size="40">
<p v-for="i in 50" :key="i">Line {{ i }}</p>
</AScrollFade>
</template>Scroll behavior
scrollBehavior controls track-click paging and programmatic scroll behavior. It defaults to smooth; set it to auto to disable smooth scrolling.
<template>
<AScrollArea height="240" scroll-behavior="auto">
<p v-for="i in 50" :key="i">Line {{ i }}</p>
</AScrollArea>
</template>Props
| Prop | Type | Default | Description |
|---|---|---|---|
height |
String | Number | undefined | Fixed height. |
maxHeight |
String | Number | undefined | Max height. |
fill |
Boolean | false | Fill the parent height. |
horizontal |
Boolean | false | Enable horizontal scrolling. |
scrollBehavior |
'auto' | 'smooth' |
'smooth' |
Track-click paging and programmatic scroll behavior. |
scrollFade |
Boolean | Object | false | Enable edge fade on the viewport. Object form accepts axis, size, topSize, bottomSize, startSize, endSize, and reveal. |
AScrollFade Props
| Prop | Type | Default | Description |
|---|---|---|---|
axis |
'vertical' | 'horizontal' | 'both' |
'vertical' |
Which edges receive the fade. |
size |
String | Number | undefined | Shared fade size. |
topSize |
String | Number | undefined | Override the top fade size. |
bottomSize |
String | Number | undefined | Override the bottom fade size. |
startSize |
String | Number | undefined | Override the inline-start fade size. |
endSize |
String | Number | undefined | Override the inline-end fade size. |
reveal |
String | Number | undefined | Scroll distance used to reveal / hide each fade. |
height |
String | Number | undefined | Fixed height for the wrapper. |
maxHeight |
String | Number | undefined | Max height for the wrapper. |
fill |
Boolean | false | Fill the parent size. |
scrollBehavior |
'auto' | 'smooth' |
'smooth' |
Native scroll behavior. |
Slots
| Slot | Props | Description |
|---|---|---|
default |
— | Scrollable content. |
AScrollArea
AScrollArea 是固定高度或最大高度的滚动区域。用于将长内容 —— 侧边栏、日志面板、选项列表 —— 约束在有限区域内。
引入
import { ScrollArea, ScrollFade } from '@any-design/anyui/vue';
// React: import { ScrollArea, ScrollFade } from '@any-design/anyui/react';
// Svelte: import { ScrollArea, ScrollFade } from '@any-design/anyui/svelte';基础用法
<template>
<AScrollArea height="240">
<p v-for="i in 50" :key="i">第 {{ i }} 行</p>
</AScrollArea>
</template>示例
最大高度与填充
maxHeight 让区域增长到上限为止；fill 将其拉伸以填充父容器高度。
<template>
<AScrollArea max-height="320" fill>
<p v-for="i in 100" :key="i">第 {{ i }} 行</p>
</AScrollArea>
</template>横向滚动
设置 horizontal 以允许宽内容的横向滚动。
<template>
<AScrollArea height="120" horizontal>
<div style="width: 1600px">很宽的内容…</div>
</AScrollArea>
</template>滚动渐隐
设置 scrollFade 可以为可滚动边缘添加渐隐遮罩。它采用与 shadcn scroll-fade 工具相同的 CSS mask 思路：支持的浏览器会只在对应方向还有内容时显示顶部 / 底部 / 左右渐隐，旧浏览器则退化为固定边缘渐隐。
<template>
<AScrollArea height="240" scroll-fade>
<p v-for="i in 50" :key="i">第 {{ i }} 行</p>
</AScrollArea>
</template>传入对象可以调整渐隐尺寸或显隐距离。
<template>
<AScrollArea
height="120"
horizontal
:scroll-fade="{ size: 32, reveal: 96 }"
>
<div style="width: 1600px">很宽的内容…</div>
</AScrollArea>
</template>ScrollFade 包装器
AScrollFade 是一个高阶滚动容器，适合只需要渐隐遮罩和原生滚动的内容。
<template>
<AScrollFade height="240" size="40">
<p v-for="i in 50" :key="i">第 {{ i }} 行</p>
</AScrollFade>
</template>滚动行为
scrollBehavior 控制轨道点击翻页和程序化滚动时的滚动行为。默认使用 smooth，也可以设置为 auto 以关闭平滑滚动。
<template>
<AScrollArea height="240" scroll-behavior="auto">
<p v-for="i in 50" :key="i">第 {{ i }} 行</p>
</AScrollArea>
</template>属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
height |
String | Number | undefined | 固定高度。 |
maxHeight |
String | Number | undefined | 最大高度。 |
fill |
Boolean | false | 撑满父容器高度。 |
horizontal |
Boolean | false | 允许横向滚动。 |
scrollBehavior |
'auto' | 'smooth' |
'smooth' |
轨道点击翻页和程序化滚动时的滚动行为。 |
scrollFade |
Boolean | Object | false | 为视口开启边缘渐隐。对象形式支持 axis、size、topSize、bottomSize、startSize、endSize 与 reveal。 |
AScrollFade 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
axis |
'vertical' | 'horizontal' | 'both' |
'vertical' |
哪些边缘启用渐隐。 |
size |
String | Number | undefined | 通用渐隐尺寸。 |
topSize |
String | Number | undefined | 覆盖顶部渐隐尺寸。 |
bottomSize |
String | Number | undefined | 覆盖底部渐隐尺寸。 |
startSize |
String | Number | undefined | 覆盖行内起始边渐隐尺寸。 |
endSize |
String | Number | undefined | 覆盖行内结束边渐隐尺寸。 |
reveal |
String | Number | undefined | 渐隐显隐使用的滚动距离。 |
height |
String | Number | undefined | 包装器固定高度。 |
maxHeight |
String | Number | undefined | 包装器最大高度。 |
fill |
Boolean | false | 撑满父容器尺寸。 |
scrollBehavior |
'auto' | 'smooth' |
'smooth' |
原生滚动行为。 |
插槽
| 插槽 | 作用域参数 | 说明 |
|---|---|---|
default |
— | 可滚动内容。 |
Line 1
Line 2
Line 3
Line 4
Line 5
Line 6
Line 7
Line 8
Line 9
Line 10
Line 11
Line 12
Line 13
Line 14
Line 15
Line 16
Line 17
Line 18
Line 19
Line 20
Line 21
Line 22
Line 23
Line 24
Line 25
Line 26
Line 27
Line 28
Line 29
Line 30
Line 31
Line 32
Line 33
Line 34
Line 35
Line 36
Line 37
Line 38
Line 39
Line 40
Line 41
Line 42
Line 43
Line 44
Line 45
Line 46
Line 47
Line 48
Line 49
Line 50
<!-- Demo 1 -->
<template>
<AScrollArea height="240">
<p v-for="i in 50" :key="i">Line {{ i }}</p>
</AScrollArea>
</template>
<!-- Demo 2 -->
<template>
<AScrollArea max-height="320" fill>
<p v-for="i in 100" :key="i">Line {{ i }}</p>
</AScrollArea>
</template>
<!-- Demo 3 -->
<template>
<AScrollArea height="120" horizontal>
<div style="width: 1600px">Very wide content…</div>
</AScrollArea>
</template>
<!-- Demo 4 -->
<template>
<AScrollArea height="240" scroll-fade>
<p v-for="i in 50" :key="i">Line {{ i }}</p>
</AScrollArea>
</template>
<!-- Demo 5 -->
<template>
<AScrollArea
height="120"
horizontal
:scroll-fade="{ size: 32, reveal: 96 }"
>
<div style="width: 1600px">Very wide content…</div>
</AScrollArea>
</template>
<!-- Demo 6 -->
<template>
<AScrollFade height="240" size="40">
<p v-for="i in 50" :key="i">Line {{ i }}</p>
</AScrollFade>
</template>
<!-- Demo 7 -->
<template>
<AScrollArea height="240" scroll-behavior="auto">
<p v-for="i in 50" :key="i">Line {{ i }}</p>
</AScrollArea>
</template>