# 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>
← El-Drawer 抽屉 介绍与安装 →