基本用法
<template>
<el-scrollbar style="height: 100px;">
<div style="height: 200px;">
<!-- 长内容，触发滚动条 -->
</div>
</el-scrollbar>
</template>
在上述例子中，<el-scrollbar> 包裹了一个具有较长内容的 <div> 元素。由于内容高度大于 <el-scrollbar> 的高度，因此会触发垂直滚动条的显示。
设置滚动条宽度
你可以使用 width 属性来设置滚动条的宽度：
<template>
<el-scrollbar style="height: 100px;" :width="10">
<div style="height: 200px;">
<!-- 长内容，触发滚动条 -->
</div>
</el-scrollbar>
</template>
在上述例子中，滚动条的宽度被设置为 10 像素。
设置滚动条颜色
你可以使用 native 属性来启用浏览器的原生滚动条，并使用 wrap-style 属性来设置包裹容器的样式：
<template>
<el-scrollbar style="height: 100px;" :native="true" wrap-style="border: 1px solid #eee;">
<div style="height: 200px;">
<!-- 长内容，触发滚动条 -->
</div>
</el-scrollbar>
</template>
在上述例子中，启用了浏览器的原生滚动条，并通过 wrap-style 属性设置了包裹容器的样式。
水平滚动
如果你需要水平滚动，可以使用 horizontal 属性：
<template>
<el-scrollbar style="width: 100px;" :horizontal="true">
<div style="width: 200px;">
<!-- 宽内容，触发水平滚动条 -->
</div>
</el-scrollbar>
</template>
在上述例子中，<el-scrollbar> 包裹了一个具有较宽内容的 <div> 元素。由于内容宽度大于 <el-scrollbar> 的宽度，因此会触发水平滚动条的显示。
滚动事件
你可以使用 @scroll 事件监听滚动事件：
<template>
<el-scrollbar style="height: 100px;" @scroll="handleScroll">
<div style="height: 200px;">
<!-- 长内容，触发滚动条 -->
</div>
</el-scrollbar>
</template>
<script>
export default {
methods: {
handleScroll(event) {
console.log('滚动了', event);
}
}
};
</script>
在上述例子中，当滚动事件发生时，handleScroll 方法会被调用。
以上是 Element Plus 中关于 <el-scrollbar> 的基本使用说明。通过调整 width、native、horizontal 等属性，以及使用 @scroll 事件，你可以实现自定义样式的滚动条并处理相应的滚动事件。详细的配置选项和事件可以在 Element Plus 的[官方文档](https://element-plus.org/#/en-US/component/scrollbar)中找到。
转载请注明出处：http://www.zyzy.cn/article/detail/5526/ElementPlus