elementui scrollbar
ElementUI Scrollbar 使用指南
ElementUI 提供了自定义滚动条组件 el-scrollbar，用于替代浏览器原生滚动条，支持更灵活的样式定制和功能扩展。以下是具体使用方法及注意事项：
基础用法
在需要滚动区域的容器外包裹 el-scrollbar 组件：
<el-scrollbar style="height: 300px;">
<div v-for="item in 50" :key="item">滚动内容行 {{ item }}</div>
</el-scrollbar>- 必须通过
style或class明确设置高度或宽度，否则无法触发滚动。 - 默认垂直滚动，横向滚动需设置
wrap-style的宽度超出容器。
常用属性配置
通过属性控制滚动条行为：
<el-scrollbar
:native="false"
:wrap-style="{ 'overflow-x': 'hidden' }"
:view-style="{ padding: '20px' }"
>
<!-- 内容 -->
</el-scrollbar>native: 是否使用原生滚动条（默认false）。wrap-style: 滚动区域容器的样式（如控制横向滚动）。view-style: 内容区域的样式（如内边距）。
滚动条样式定制
通过 CSS 覆盖默认样式：
/* 修改滚动条轨道 */
.el-scrollbar__bar {
background-color: #f0f0f0;
}
/* 修改滚动条滑块 */
.el-scrollbar__thumb {
background-color: #c0c4cc;
}方法调用
通过 ref 获取实例并调用滚动方法：
<el-scrollbar ref="scrollbar">
<div>长内容...</div>
</el-scrollbar>
<script>
export default {
methods: {
scrollToTop() {
this.$refs.scrollbar.scrollTo({ top: 0 });
}
}
}
</script>支持的方法包括：
scrollTo(x, y)setScrollTop(position)setScrollLeft(position)
注意事项
- 在表格等复杂组件中使用时，需确保外层容器尺寸正确。
- 动态内容加载后，可能需要手动调用
update()方法重新计算滚动条。 - 移动端兼容性较差，建议通过
native属性切换为原生滚动条。
如需更复杂的滚动交互（如无限加载），可结合 @scroll 事件监听实现。
