ElementUI隐藏组件滚动条

当页面遇到需要滚动条的时候,浏览器自带的滚动条不够美观,达不到自己的需求。那么elementUI自带的隐藏组件el-scrollbar一定要尝试下,具体使用如下:


提示:以下是本篇文章正文内容,下面案例可供参考

一、代码参考

1、el-scrollbar组

件使用

<div class="head-container" style="height:calc(100vh - 200px)">
  <el-scrollbar > 
    <el-tree
      :data="deptOptions"
      :props="defaultProps"
      :expand-on-click-node="false"
      :filter-node-method="filterNode"
      ref="tree"
      default-expand-all
      @node-click="handleNodeClick"
    />
  </el-scrollbar>
</div>

说明: div盒子包含一个el-tree树组件,div给定行内样式高度;树组件渲染的高度大于div,那么可以使用el-scrollbar组件覆盖浏览器默认的滚动条

2、css样式修改

<style lang="scss" scoped>
  .el-scrollbar {
    height: 100%;
  }
  .el-scrollbar__wrap {
    overflow: scroll;
    width: 110%;
    height: 120%;
  }
</style>

问题点:x轴滚动条样式无法隐藏

解决办法:1、去除style中的scoped属性  2、外部引入上面css样式

二、注意事项

根据需要的滚动条,外层的盒子需要给到对应的width或height


总结

        关于el-scrollbar组件的使用以及注意的地方就说到这儿,有存在不正确的地方,请大佬多多指正!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值