vue + elementUI中的滚动条el-scrollbar使用总结

952 阅读1分钟

由于需要使用滚动条,原生滚动条长的太丑,查到了elementUI中的滚动条
el-scrollbar,使用简洁方便,样式如下:
在这里插入图片描述
使用方法如下:
外部的div必须给固定高度才行

<!-- 外部div -->
<div style="height: 650px; display: flex" class="cab" >
      <el-scrollbar style="height:100%">
	      <!-- 内部div -->
	      <div></div>
      </el-scrollbar>
</div>

一般根据需要可以隐藏横向滚动条,网上查的是这个,但是我用起来没生效

.el-scrollbar__wrap{
  overflow-x: hidden;
}

后来自己f12倒腾出来了,我之前只用了下面这个,我自己这可以,结果别人那原生的横向滚动条也跑出来了
在这里插入图片描述

.cab .is-horizontal{
  display: none;
}

后来又倒腾,终于隐藏了

.cab .is-horizontal{
  display: none;
}

.cab .el-scrollbar__wrap {
  overflow-x: hidden;
}