Scrollbar 滚动条

Scrollbar 滚动条

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

基础用法

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

<template>
  <el-scrollbar height="400px">
    <p v-for="item in 20" :key="item" class="scrollbar-demo-item">{{ item }}</p>
  </el-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(--el-color-primary-light-9);
  color: var(--el-color-primary);
}
</style>

横向滚动

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

<template>
  <el-scrollbar>
    <div class="scrollbar-flex-content">
      <p v-for="item in 50" :key="item" class="scrollbar-demo-item">
        {{ item }}
      </p>
    </div>
  </el-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(--el-color-danger-light-9);
  color: var(--el-color-danger);
}
</style>

最大高度

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

<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 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(--el-color-primary-light-9);
  color: var(--el-color-primary);
}
</style>

手动滚动

通过使用 setScrollTop 与 setScrollLeft 方法，可以手动控制滚动条滚动。

<template>
  <el-scrollbar ref="scrollbarRef" height="400px" always @scroll="scroll">
    <div ref="innerRef">
      <p v-for="item in 20" :key="item" class="scrollbar-demo-item">
        {{ item }}
      </p>
    </div>
  </el-scrollbar>
  <el-slider
    v-model="value"
    :max="max"
    :format-tooltip="formatTooltip"
    @input="inputSlider"
  />
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { ElScrollbar } from 'element-plus'
const max = ref(0)
const value = ref(0)
const innerRef = ref<HTMLDivElement>()
const scrollbarRef = ref<InstanceType<typeof ElScrollbar>>()
onMounted(() => {
  max.value = innerRef.value!.clientHeight - 380
})
const inputSlider = (value: number) => {
  scrollbarRef.value!.setScrollTop(value)
}
const scroll = ({ scrollTop }) => {
  value.value = scrollTop
}
const formatTooltip = (value: number) => {
  return `${value} px`
}
</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(--el-color-primary-light-9);
  color: var(--el-color-primary);
}
.el-slider {
  margin-top: 20px;
}
</style>

Scrollbar 属性

属性	说明	类型	可选值	默认值
height	滚动条高度	string / number	—	—
max-height	滚动条最大高度	string / number	—	—
native	是否使用原生滚动条样式	boolean	—	false
wrap-style	包裹容器的自定义样式	string	—	—
wrap-class	包裹容器的自定义类名	string	—	—
view-style	视图的自定义样式	string	—	—
view-class	视图的自定义类名	string	—	—
noresize	不响应容器尺寸变化，如果容器尺寸不会发生变化，最好设置它可以优化性能	boolean	—	false
tag	视图的元素标签	string	—	div
always	滚动条总是显示	boolean	—	false
min-size	滚动条最小尺寸	number	—	20

Scrollbar 事件

事件名	说明	参数
scroll	滚动时触发的事件	滚动距离 `{ scrollLeft, scrollTop }`

Scrollbar 方法

方法名	说明	参数
scrollTo	滚动到一组特定坐标	(options: ScrollToOptions \| number, yCoord?: number)
setScrollTop	设置滚动条到顶部的距离	(scrollTop: number)
setScrollLeft	设置滚动条到左边的距离	(scrollLeft: number)
update	手动更新滚动条状态	—