Element scrollbar 使用封装

Posted 2023-04-28

参考技术A

最近进行 Element UI 组件封装，在之前的项目中经常用到 el-scrollbar 这个内置组件，这次单独封装时遇到点写法上的小问题，做个记录和分享，希望能帮到相关的开发者。

el-scrollbar 在 Element 组件官方文档中没有，在 node_modules 中可以看到，目录位置 node_modules/element-ui/packages/scrollbar

在 Vue 页面中直接引入 el-scrollbar 标签，定义对应的高度就可以实现 element 官方的滚动条效果

这时候，默认效果的纵向滚动条有了，但是横向会出现浏览器默认的滚动条占位，如下效果

默认的横向滚动条隐藏可以设置 el-scrollbar__wrap 类属性为 overflow-x: hidden; 移除， el-scrollbar__wrap 属性可以在浏览其中查看元素看到，在自定义的元素内部，选择元素后在 style 添加 overflow-x: hidden; 即可查看移除默认滚动条的效果

在我们的项目组件封装过程中，这个组件的属性设置需要在 <style> 中设置， 注意 默认 css 默认下不能添加 scoped 属性才能正常生效（这里花了我半个小时才弄出来效果）, 写法如下

有的项目里 <style> 标签里如果使用了 scss 并且使用了 scoped 属性的话，需要使用 deep 操作符. 这里可以查看官方说明 https://vue-loader.vuejs.org/zh/guide/scoped-css.html , 如下写法

项目中大部分使用 el-scrollbar 默认使用纵向滚动条效果，在我们项目里的 tag 页签功能区使用了横向滚动条，隐藏了纵向滚动条，由于自定义的需求，在实际使用时需要根据情况设置对应的边距问题，这里调整的时候还需要隐藏原生滚动条，这时候需要耐心一点才能调出想要的页面效果。

ElementUI中scrollbar的使用解析

### 在用ElementUI开发项目的过程中，我们有时会需要滚动条，但是Element默认没有Scroll-view这个组件，我们去elementui的github页面上的issues中去搜索scrollbar，可以看到关于这个问题，还是有不少issue的。比如：

 

从中我们可以看出，内部是由elscrollbar这个组件的，但是因为并不通用，所以没有写相关文档。另外当resize事件时，也有一些bug。不过像页面上小范围内的滚动，还是可以用的，很简单，只需给想实现滚动的元素内容包裹在<el-scrollbar></el-scrollbar>中就行了，记得给wrapClass设置max-height属性，这样才能出现滚动条，就像elselct里边一样。

```js

<el-select-menu

ref="popper"

:append-to-body="popperAppendToBody"

v-show="visible && emptyText !== false">

<el-scrollbar

tag="ul"

wrap-class="el-select-dropdown__wrap"

view-class="el-select-dropdown__list"

ref="scrollbar"

:class="{ ‘is-empty‘: !allowCreate && query && filteredOptionsCount === 0 }"

v-show="options.length > 0 && !loading">

<el-option

:value="query"

created

v-if="showNewOption">

</el-option>

<slot></slot>

</el-scrollbar>

<p

class="el-select-dropdown__empty"

v-if="emptyText &&

(!allowCreate || loading || (allowCreate && options.length === 0 ))">

{{ emptyText }}

</p>

</el-select-menu>

```