码迷,mamicode.com
首页 > 其他好文 > 详细

Element UI 中被隐藏的滚动条

时间:2019-03-06 18:01:56      阅读:973      评论:0      收藏:0      [点我收藏+]

标签:自己   otto   bar   com   地址   .com   github   组件   out   

Element UI 官网中有用到自定义的滚动条组件,但是发布的所有版本中都不曾提及,个中原因我们不得而知,不过我们还是可以拿过来引用到自己的项目中。

技术图片

使用的时候,放在 <el-scrollbar></el-scrollbar> 标签内即可
如:
<div style="height:100%">
  <el-scrollbar class="m-scroll" style="height:100%">
    <router-view/>
  </el-scrollbar>
 </div>

发现底部出现横向滚动条,

技术图片

问题大概在于 <el-scrollbar></el-scrollbar> 上的 height: 100% 与 margin-bottom 同时显示

技术图片
直接用 overflow-x:hidden  隐藏:
.el-scrollbar__wrap {
    overflow-x: hidden;
}


技术图片


PS:通过阅读源码,可以看到暴露的几个属性
props: {
    native: Boolean,    // 使用原生滚动条
    wrapStyle: {},      // 包裹层
    wrapClass: {},
    viewClass: {},      // 内容层
    viewStyle: {},
    noresize: Boolean,  // 如果 container 尺寸不会发生变化,最好设置它可以优化性能
    tag: {              // 编译后生成的标签,默认 `div`
      type: String,
      default: ‘div‘
    }
  },

所以,前面的代码可以插入这些属性

<div style="height:100%">
  <el-scrollbar
     :native="false" 
     wrapStyle="" 
     wrapClass="" 
     viewClass="" 
     viewStyle="" 
     noresize="false" 
     tag="section">
    <router-view/>
  </el-scrollbar>
 </div>

 


最后附上官方github地址:
https://github.com/ElemeFE/element/blob/dev/packages/scrollbar/src/main.js#L14

Element UI 中被隐藏的滚动条

标签:自己   otto   bar   com   地址   .com   github   组件   out   

原文地址:https://www.cnblogs.com/_error/p/10484703.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!