ETU组件库

Appearance

Return to top
On this page

Scrollbar 滚动条

用于替换浏览器原生滚动条。

基础用法

通过 height 属性设置滚动条高度，若不设置则根据父容器高度自适应。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

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

<style scoped>
.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--etu-color-primary-light-9);
  color: var(--etu-color-primary);
}
</style>

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

<style scoped>
.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--etu-color-primary-light-9);
  color: var(--etu-color-primary);
}
</style>

横向滚动

当元素宽度大于滚动条宽度时，会显示横向滚动条。

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

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

<style scoped>
.scrollbar-flex-content {
  display: flex;
}
.scrollbar-demo-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--etu-color-danger-light-9);
  color: var(--etu-color-danger);
}
</style>

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

<style scoped>
.scrollbar-flex-content {
  display: flex;
}
.scrollbar-demo-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--etu-color-danger-light-9);
  color: var(--etu-color-danger);
}
</style>

最大高度

当元素高度超过最大高度，才会显示滚动条。

1

2

3

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

<script lang="ts" setup>
import { ref } from "vue";
const count = ref(3);

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

<style scoped>
.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--etu-color-primary-light-9);
  color: var(--etu-color-primary);
}
</style>

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

<script lang="ts" setup>
import { ref } from "vue";
const count = ref(3);

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

<style scoped>
.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--etu-color-primary-light-9);
  color: var(--etu-color-primary);
}
</style>

Scrollbar 属性

属性名说明类型可选值默认值
height滚动条高度string/number--
max-height滚动条最大高度string/number--

DatePicker 事件

事件名说明类型
scroll当触发滚动事件时，返回滚动的距离Function

Scrollbar 插槽

名称说明
—自定义默认内容