el-scrollbar 组件
当组件中内容过多时,展开后会产生滚动条影响外部整体样式,这个时候需要将滚动条放在组件内部,不让其变化影响其他组件。el-scrollbar可以实现这个功能
el-scrollbar实现菜单内部滚动条
<el-scrollbar style="height:100%;">
<el-menu
class="sidebar-el-menu"
default-active="1-4-1"
@open="handleOpen"
@close="handleClose"
:collapse="isCollapse"
unique-opened
router
>
</el-scrollbar>
注意:
外部组件是有高度的,el-scrollbar可以直接设置为占满高度
style="height:100%;"
横向也可能会有滚动条产生,el-scrollbar需要设置为超出部分隐藏
el-scrollbar__wrap为其内部样式
/* 覆盖scrollbar中 overflow: scroll; 会导致横向滚动条*/
.el-scrollbar__wrap {
overflow: hidden;
}
效果
调整前,会挤边
调整后,内部滚动条