项目开发中使用到了elementui组件,后期发现浏览器中的滚动条不仅占宽,还与页面暗色风格不搭配。于是打算寻找一款插件使用,而elementui中的scroll组件刚好满足需要而且兼容ie10+。
官网侧边栏中scroll的使用截图
使用方法
直接在页面中调用el-scroll
组件
<el-scrollbar style="height: 325px;width: 300px;">
<!-- 具体要包裹的内容 -->
<div style="
width: 500px;
height: 370px;
line-height: 300px;
text-align: center;
"> 占位</div>
</el-scrollbar>
页面内渲染出的dom结构可以看出,组件内总共有三块内容
- 最外层:el-scrollbar。使用时需要指定高度和宽度
- 第一块代码:el-scroll__wrap:
1).overflow:scroll
是写在这里的,通过margin
为负,将浏览器中的原始滚动条排除视觉内隐藏掉。
2).el-scroll__view包裹滚动区域 - 第二块代码:el-scroll__bar is-horizontal: 横向滚动条
- 第三块代码:el-scroll__bar is-vertical: 纵向滚动条
组件的自定义属性
根据官网的scroll组件源码,可以看到scroll组件是有几个属性可以传入的。具体使用可以自己研究下,主要就是传入自定义样式和class,注意自定义stlye接收的是数组类型。
举栗子:
<el-scroll
:view-class="'the-view-class'"
:wrap-style="[{height:'300px'},{width:'300px'}]"
:wrap-class="'the-wrap-class'">
</el-scroll>