# Scrollbar 滚动条

基于 El-Scrollbar 常用功能总结,置于div上层,需要固定高度

# 基础用法



<!--滚动条-->
<el-scrollbar :style="{ 'height':40 + 'px'}">

</el-scrollbar>

<style scoped>
  ::v-deep .el-scrollbar__wrap {
    overflow-x: hidden !important;
  }
</style>

# 进阶用法


<el-dialog
    title="选择 主送/抄送 部门"
    :visible.sync="dialogVisible"
    width="40%"
>
  <el-scrollbar>
    <span>这是一段信息</span>
  </el-scrollbar>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </div>
</el-dialog>

<style scoped>
  $height: 500px;

  ::v-deep .el-dialog {
    height: $height !important;
    margin-top: calc(50vh - #{$height / 2}) !important;
    border-radius: 10px !important;
  }

  ::v-deep .el-dialog__body {
    padding: 10px;
  }

  ::v-deep .el-scrollbar {
    height: calc(#{$height} - 140px) !important;
  }

  ::v-deep .el-scrollbar__wrap {
    overflow-x: hidden !important;
  }
</style>