Scrollbar 滚动条

用于替换浏览器原生滚动条，提供统一的视觉体验。

import { createApp } from 'vue'
import { Scrollbar as ElScrollbar } from '@szhn/dh-design-pc'

const app = createApp()
app.use(ElScrollbar)

基础用法

通过 height 属性设置滚动条高度，内容超出时出现纵向滚动条。

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

<script lang="ts" setup>
import { Scrollbar as ElScrollbar } from '@szhn/dh-design-pc'

</script>

<style scoped>
.scrollbar-item {
  margin: 0;
  padding: 8px 16px;
  border-bottom: 1px solid var(--el-border-color-lighter);
}
</style>

横向滚动

当内容宽度超出容器时，el-scrollbar 会显示横向滚动条。配合 always 可使滚动条始终显示。

<template>
  <el-scrollbar height="200px" always>
    <div class="scrollbar-flex-content">
      <div v-for="item in 50" :key="item" class="scrollbar-demo-item">
        {{ item }}
      </div>
    </div>
  </el-scrollbar>
</template>

<script lang="ts" setup>
import { Scrollbar as ElScrollbar } from '@szhn/dh-design-pc'

</script>

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

最大高度

使用 max-height 可在内容不足时隐藏滚动条，超出后才显示。

<template>
  <el-scrollbar max-height="200px">
    <p v-for="item in count" :key="item" class="scrollbar-item">{{ item }}</p>
    <el-button class="btn-add" @click="add">添加项目</el-button>
  </el-scrollbar>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Scrollbar as ElScrollbar, Button as ElButton } from '@szhn/dh-design-pc'


const count = ref(3)
const add = () => (count.value += 1)
</script>

<style scoped>
.scrollbar-item {
  margin: 8px 0;
  padding: 8px 16px;
  background: var(--el-color-primary-light-9);
  border-radius: 4px;
}
.btn-add {
  margin-top: 12px;
}
</style>

手动滚动

通过 ref 调用 setScrollTop / setScrollLeft 可以手动控制滚动位置。

<template>
  <div class="scrollbar-demo">
    <el-button @click="scroll(0)">置顶</el-button>
    <el-button @click="scroll(300)">滚动到 300px</el-button>
    <el-button @click="scroll(800)">滚动到 800px</el-button>
    <el-scrollbar ref="scrollbarRef" height="200px" class="scroll-area">
      <div
        v-for="item in 20"
        :key="item"
        class="scrollbar-item"
      >
        Item {{ item }}
      </div>
    </el-scrollbar>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Scrollbar as ElScrollbar, Button as ElButton } from '@szhn/dh-design-pc'


const scrollbarRef = ref<InstanceType<typeof ElScrollbar>>()
const scroll = (top: number) => {
  scrollbarRef.value?.setScrollTop(top)
}
</script>

<style scoped>
.scrollbar-demo {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.scroll-area {
  border: 1px solid var(--el-border-color);
  border-radius: 4px;
}
.scrollbar-item {
  padding: 12px 16px;
  border-bottom: 1px solid var(--el-border-color-lighter);
}
</style>

API

Attributes

属性名	说明	类型	默认值
height	高度	string / number	—
max-height	最大高度	string / number	—
native	是否使用原生滚动条	boolean	false
always	是否总是显示滚动条	boolean	false
min-size	滚动条最小尺寸	number	20
tag	视图元素标签	string	div
view-class	视图元素自定义类名	string / array / object	—
view-style	视图元素自定义样式	string / object	—
wrap-class	包裹元素自定义类名	string / array / object	—
wrap-style	包裹元素自定义样式	string / object	—

Events

事件名	说明	回调参数
scroll	滚动时触发	{ scrollTop, scrollLeft }

Exposes

名称	说明
setScrollTop	滚动到指定纵向位置
setScrollLeft	滚动到指定横向位置
update	手动更新滚动条状态

更多细节参见 Element Plus Scrollbar 文档。