Scrollbar 滚动条

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

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

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

基础用法

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

横向滚动

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

最大高度

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

手动滚动

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

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 文档。