Scroll 滚动容器

BzScroll 是基于 Element Plus Scrollbar 封装的基础滚动容器组件，用于承载需要限定高度并支持自定义滚动的内容区域。

注意：BzScroll 完整透传 Element Plus Scrollbar 的所有属性和事件，你可以像使用原生 ElScrollbar 一样使用它。

基础用法

基础用法

Vue Demo

滚动内容 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

滚动内容 51

滚动内容 52

滚动内容 53

滚动内容 54

滚动内容 55

滚动内容 56

滚动内容 57

滚动内容 58

滚动内容 59

滚动内容 60

滚动内容 61

滚动内容 62

滚动内容 63

滚动内容 64

滚动内容 65

滚动内容 66

滚动内容 67

滚动内容 68

滚动内容 69

滚动内容 70

滚动内容 71

滚动内容 72

滚动内容 73

滚动内容 74

滚动内容 75

滚动内容 76

滚动内容 77

滚动内容 78

滚动内容 79

滚动内容 80

滚动内容 81

滚动内容 82

滚动内容 83

滚动内容 84

滚动内容 85

滚动内容 86

滚动内容 87

滚动内容 88

滚动内容 89

滚动内容 90

滚动内容 91

滚动内容 92

滚动内容 93

滚动内容 94

滚动内容 95

滚动内容 96

滚动内容 97

滚动内容 98

滚动内容 99

滚动内容 100

可直接复制并在项目中使用

<template>
  <BzScroll height="400px">
    <div v-for="item in 100" :key="item">滚动内容 {{ item }}</div>
  </BzScroll>
</template>

列表滚动示例

列表滚动

Vue Demo

列表项 1

列表项 2

列表项 3

列表项 4

列表项 5

列表项 6

列表项 7

列表项 8

列表项 9

列表项 10

列表项 11

列表项 12

列表项 13

列表项 14

列表项 15

列表项 16

列表项 17

列表项 18

列表项 19

列表项 20

可直接复制并在项目中使用

<template>
  <BzScroll height="240px">
    <div
      v-for="item in 20"
      :key="item"
      style="padding: 12px; border-bottom: 1px solid #f0f0f0;"
    >
      列表项 {{ item }}
    </div>
  </BzScroll>
</template>

使用原生 Element Plus 属性

你可以直接使用 ElScrollbar 的所有属性，比如 max-height、native、always 等：

透传原生属性

Vue Demo

滚动内容 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

滚动内容 51

滚动内容 52

滚动内容 53

滚动内容 54

滚动内容 55

滚动内容 56

滚动内容 57

滚动内容 58

滚动内容 59

滚动内容 60

滚动内容 61

滚动内容 62

滚动内容 63

滚动内容 64

滚动内容 65

滚动内容 66

滚动内容 67

滚动内容 68

滚动内容 69

滚动内容 70

滚动内容 71

滚动内容 72

滚动内容 73

滚动内容 74

滚动内容 75

滚动内容 76

滚动内容 77

滚动内容 78

滚动内容 79

滚动内容 80

滚动内容 81

滚动内容 82

滚动内容 83

滚动内容 84

滚动内容 85

滚动内容 86

滚动内容 87

滚动内容 88

滚动内容 89

滚动内容 90

滚动内容 91

滚动内容 92

滚动内容 93

滚动内容 94

滚动内容 95

滚动内容 96

滚动内容 97

滚动内容 98

滚动内容 99

滚动内容 100

可直接复制并在项目中使用

<template>
  <BzScroll :max-height="400" always>
    <div v-for="item in 100" :key="item">滚动内容 {{ item }}</div>
  </BzScroll>
</template>

自定义类名

自定义类名

Vue Demo

自定义样式内容 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>
  <BzScroll height="300px" class="custom-scroll">
    <div v-for="item in 50" :key="item">自定义样式内容 {{ item }}</div>
  </BzScroll>
</template>

滚动到底部事件

当滚动区域到达底部时会触发 end-bottom 事件，可用于实现无限加载等场景。

触底事件

Vue Demo

滚动内容 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

滚动内容 51

滚动内容 52

滚动内容 53

滚动内容 54

滚动内容 55

滚动内容 56

滚动内容 57

滚动内容 58

滚动内容 59

滚动内容 60

滚动内容 61

滚动内容 62

滚动内容 63

滚动内容 64

滚动内容 65

滚动内容 66

滚动内容 67

滚动内容 68

滚动内容 69

滚动内容 70

滚动内容 71

滚动内容 72

滚动内容 73

滚动内容 74

滚动内容 75

滚动内容 76

滚动内容 77

滚动内容 78

滚动内容 79

滚动内容 80

滚动内容 81

滚动内容 82

滚动内容 83

滚动内容 84

滚动内容 85

滚动内容 86

滚动内容 87

滚动内容 88

滚动内容 89

滚动内容 90

滚动内容 91

滚动内容 92

滚动内容 93

滚动内容 94

滚动内容 95

滚动内容 96

滚动内容 97

滚动内容 98

滚动内容 99

滚动内容 100

可直接复制并在项目中使用

<script setup lang="ts">
function handleScrollEndBottom() {
  console.log('滚动到底部了')
}
</script>

<template>
  <BzScroll height="400px" @end-bottom="handleScrollEndBottom">
    <div v-for="item in 100" :key="item">滚动内容 {{ item }}</div>
  </BzScroll>
</template>

组合示例

下面这个例子同时使用了固定高度、原生透传属性和触底事件：

组合示例

Vue Demo

内容 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

内容 51

内容 52

内容 53

内容 54

内容 55

内容 56

内容 57

内容 58

内容 59

内容 60

内容 61

内容 62

内容 63

内容 64

内容 65

内容 66

内容 67

内容 68

内容 69

内容 70

内容 71

内容 72

内容 73

内容 74

内容 75

内容 76

内容 77

内容 78

内容 79

内容 80

内容 81

内容 82

内容 83

内容 84

内容 85

内容 86

内容 87

内容 88

内容 89

内容 90

内容 91

内容 92

内容 93

内容 94

内容 95

内容 96

内容 97

内容 98

内容 99

内容 100

可直接复制并在项目中使用

<script setup lang="ts">
function loadMore() {
  console.log('load more')
}
</script>

<template>
  <BzScroll
    height="320px"
    :distance="16"
    always
    @end-bottom="loadMore"
  >
    <div v-for="item in 100" :key="item">内容 {{ item }}</div>
  </BzScroll>
</template>

Props

参数	说明	类型	默认值
height	滚动容器高度	string	'100%'
class	自定义滚动容器类名	string	''
distance	距离底部触发事件的距离	number	0
label	标签文本（预留字段）	string	''
...	完整透传 Element Plus Scrollbar 所有属性	-	-

Events

事件名	说明	回调参数
end-bottom	滚动到底部时触发	-
...	完整透传 Element Plus Scrollbar 所有事件	-

Slots

插槽名	说明
default	滚动区域内容