Scrollbar 滚动条

滚动条用于替换浏览器原生滚动条。VISTA B 直接使用 Element Plus 的 el-scrollbar，样式沿用组件库，适合列表、弹窗内容区、侧边栏和横向内容容器。

基础用法

通过 height 属性设置滚动区域高度。未设置 height 时，滚动条会根据父容器高度自适应。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<el-scrollbar height="400px">
  <p v-for="item in 20" :key="item" class="scrollbar-demo-item">
    {{ item }}
  </p>
</el-scrollbar>

横向滚动

当内容宽度大于滚动容器宽度时，会显示横向滚动条。横向列表需要让内部内容保持一行展示，并设置内容宽度为 fit-content。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

<el-scrollbar>
  <div class="scrollbar-flex-content">
    <p v-for="item in 50" :key="item" class="scrollbar-demo-item">
      {{ item }}
    </p>
  </div>
</el-scrollbar>

最大高度

通过 max-height 设置最大高度。当内容没有超过最大高度时不显示滚动条，超过后才会出现滚动条。

1

2

3

<template>
  <el-button @click="add">Add Item</el-button>
  <el-button @click="onDelete">Delete Item</el-button>
  <el-scrollbar max-height="400px">
    <p v-for="item in count" :key="item" class="scrollbar-demo-item">
      {{ item }}
    </p>
  </el-scrollbar>
</template>

<script setup>
import { ref } from "vue"

const count = ref(3)
const add = () => count.value++
const onDelete = () => {
  if (count.value > 0) count.value--
}
</script>

手动滚动

通过 scrollTo、setScrollTop 和 setScrollLeft 方法，可以主动控制滚动位置。需要先通过 ref 获取 el-scrollbar 实例。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<template>
  <el-scrollbar ref="scrollbarRef" height="400px" always>
    <p v-for="item in 20" :key="item" class="scrollbar-demo-item">
      {{ item }}
    </p>
  </el-scrollbar>
  <el-button @click="scrollbarRef.setScrollTop(120)">Scroll Top</el-button>
</template>

<script setup>
import { ref } from "vue"

const scrollbarRef = ref()
</script>

无限滚动

end-reached 会在滚动条到达边缘时触发，可用于加载更多。配合 distance 可以设置距离边缘多少像素时触发。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

<template>
  <el-scrollbar height="400px" :distance="20" @end-reached="loadMore">
    <p v-for="item in count" :key="item" class="scrollbar-demo-item">
      {{ item }}
    </p>
  </el-scrollbar>
</template>

<script setup>
import { ref } from "vue"

const count = ref(30)
const loadMore = (direction) => {
  if (direction === "bottom") count.value += 5
}
</script>

API

Scrollbar 属性

属性	说明	类型	默认值
height	滚动条高度	string / number	空
max-height	滚动条最大高度	string / number	空
native	是否使用原生滚动条样式	boolean	false
wrap-style	包裹容器自定义样式	string / object / array	空
wrap-class	包裹容器自定义类名	string / array	空
view-style	视图自定义样式	string / object / array	空
view-class	视图自定义类名	string / array	空
noresize	不响应容器尺寸变化，可用于尺寸固定场景的性能优化	boolean	false
tag	视图元素标签	string	div
always	是否总是显示滚动条	boolean	false
min-size	滚动条最小尺寸	number	20
id	视图 ID	string	空
role	视图角色	string	空
aria-label	视图 aria-label	string	空
aria-orientation	视图 aria-orientation	horizontal / vertical / undefined	空
tabindex	包裹容器 tabindex	string / number	空
distance	触发 end-reached 的边缘距离，单位 px	number	0

Scrollbar 事件

事件	说明	类型
scroll	滚动时触发，返回 scrollTop 和 scrollLeft	Function
end-reached	滚动到边缘时触发，返回方向 top / bottom / left / right	Function

Scrollbar 插槽

插槽	说明
default	自定义默认内容

Scrollbar 暴露方法

名称	说明
handleScroll	触发滚动事件
scrollTo	滚动到指定坐标
setScrollTop	设置滚动条到顶部的距离
setScrollLeft	设置滚动条到左侧的距离
update	手动更新滚动条状态
wrapRef	滚动条包裹容器 ref