SuperAPI AI 工具集

el-scrollbar

通用与其它

查看项目

更新于 10-15 23:32

技能介绍

用途:el-scrollbar 是 Element Plus 提供的滚动条组件,用自定义滚动条替代浏览器原生滚动条,适合需要自定义滚动条样式、可滚动容器、无限滚动或自定义滚动区域的界面。

主要能力:支持设置 height(固定高度)与 max-height(最大高度);支持横向滚动;native 属性可切换回原生滚动条;always 属性让滚动条始终显示;可通过 wrap-style、wrap-class、view-style、view-class 定制样式;tag 指定视图元素标签;noresize 忽略容器尺寸变化;min-size 设置滚动条最小尺寸。事件包括 scroll(返回 scrollLeft、scrollTop)与 end-reached(返回方向 top/bottom/left/right,用于无限滚动,距离由 distance 控制)。通过 ref 暴露 scrollTo、setScrollTop、setScrollLeft、update 方法以及 wrapRef。

使用方式:以 <el-scrollbar> 包裹可滚动内容。固定高度容器用 height="400px";自适应容器用 max-height;横向滚动通过内部宽内容配合 flex 布局实现;手动滚动可给组件加 ref,再调用 scrollbarRef.value.setScrollTop(0);无限滚动监听 @end-reached,在回调中按 direction 追加数据。

适用场景:需要在 Vue 3 + Element Plus 项目中统一滚动条样式的列表、面板、弹层内容区,以及触屏设备上希望滚动条常显或需要加载更多的长列表。

限制:资料未提供具体的安装命令、版本要求、收费信息或浏览器兼容范围,暂未提供。实际属性默认值以资料为准,如 native、noresize、always 默认 false,min-size 默认 20,distance 默认 0,tag 默认 'div'。