自定义滚动条，挖掘element 隐藏组件

总所周知win平台浏览器的滚动条又宽又丑，本来业务上没有需求自定义滚动条，但是由于页面加了全局loading会造成滚动条闪瞎你的眼睛

正文开始

 element并没有吧自定义滚动组件单独写出来，但是我们也可以找到相应的用法

<el-scrollbar  style="height:100vh;" :wrapStyle="[{'overflow-x':'hidden'}]">
    
</el-scrollbar>

把这个组件套在你dom父级

首先这个高度必须给

其他属性

参数	说明	类型	默认
native	是否使用原生滚动条样式	boolean	false
wrapStyle	wrap层style	Array/String	--
wrapClass	wrap层class	String	--
viewStyle	view层style	Array/String	--
viewClass	view层class	String	--
noresize	是否添加resize监听	boolean	false
tag	view层html标签	String	div

 对应dom区域

<div class="el-scrollbar" style="height: 100px;">
  <div class="el-scrollbar__wrap" style="margin-bottom: -17px; margin-right: -17px;">
    <div class="el-scrollbar__view">
      
    </div>
  </div>
  <!-- element垂直滚动条 native 为 true 时不出现 -->
  <div class="el-scrollbar__bar is-horizontal">
    <div class="el-scrollbar__thumb" style="transform: translateX(0%);"></div>
  </div>
  <!-- element水平滚动条 native 为 true 时不出现 -->
  <div class="el-scrollbar__bar is-vertical">
    <div class="el-scrollbar__thumb" style="height: 35.4701%; transform: translateY(0%);"></div>
  </div>
</div>

end