前提条件：请先确保设置了样式使之能够产生滚动条件：
以面包屑导航设置的样式为例：
必须给el-scrollbar的父级设置高度才能使el-scrollbar具备滚动条件
.content{
height:50px
}
这里针对面包屑导航业务对 el-scrollbar 内部一些样式进行重置
/deep/ .el-scrollbar__wrap {
width: calc(100% - 250px); //导航条宽度是动态计算的
white-space: nowrap; // 必须设置不换行才能进行横向滚动
overflow: hidden !important; //去除默认长的很丑的滚动条
}
/deep/ .el-breadcrumb__item {
float: unset !important; // 面包屑导航每一项去除浮动
}
如果到这里导航栏还不显示， 像我这样鼠标移动上去不显示滚动条：
![]()
可能是由于 el-scrollbar 无法及时监听到内部标签的宽度变化例如：我们使用 el-breadcrumb 面包屑来当浏览导航，当导航长度超出时，此时 el-scrollbar 无法监听到el-breadcrumb内部宽度的变化，无法产生滚动条
这里再以面包屑导航为例进行解决：
<div class='content'>
<el-scrollbar v-if="showScroll">
<el-breadcrumb>
<transition-group name="breadcrumb">
<el-breadcrumb-item v-for="(item,index) in levelList" :key="index">
...内部动态添加的内容省略
</el-breadcrumb-item>
</transition-group>
</el-breadcrumb>
</el-scrollbar>
</div>
重点来了！由于滚动条监测不到面包屑导航栏内部宽度变化，当内容超出时无法正常显示滚动条，所以监听导航标签数组的变化，让滚动条内部触发重新计算宽度。
export default {
data() {
return {
showScroll: true
};
},
watch: {
levelList() {
//由于滚动条监测不到面包屑导航栏内部宽度变化，当内容超出时无法正常显示滚动条，所以手动触发让滚动条内部重新计算宽度
this.showScroll = false;
this.$nextTick(() => {
this.showScroll = true;
});
}
},
}
