el-scrollbar滚动条的使用

项目中不可避免的会出现滚动条，若使用的是element组件库，则可以直接使用组件库的滚动条，不用在去修改原始样式属性，从而去兼容主流浏览器。

element官网文章中没有介绍滚动条的使用方式，我们可以通过看源码来使用。

Html结构：

<!-- container为显示框 -->
<div class="container">   
    <el-scrollbar class="customScrollbar">       
        <div class="item"></div>   
    </el-scrollbar>
</div>

CSS样式：

// 宽高需要固定
.container{
   width: 100%;   height: calc(100% - 50px);
}
.customScrollbar {   
    height: 100%;      
    /deep/.el-scrollbar__wrap {        
        overflow-x: hidden;  
    }
}

**注意：**不要在父控件没有特定高度的情况下，给他一个height:100%，那样他的高度就会和它里面的内容一样高，他就不会出现下拉条。 

另外：.el-scrollbar__wrap{ overflow-x: hidden; } 这个样式，如果被暴露在外面，比如写这个样式的vue页面如果被import在main.js里，会导致其他页面的el-select下拉菜单的高度出现问题。