el-scrollbar 滚动条

一、滚动条的使用：

<el-scrollbar>
    <!-- 滚动条要包裹的内容 -->
    <div>内容</div>
</el-scrollbar>

二、遇到问题：

1.这样引入默认不显示滚动条，鼠标移入，无法滚动

问题原图：

 

 解决方案：

 /*  默认展示滚动条，或者把/deep/替换成::v-deep */    
/deep/.el-scrollbar__bar {
  opacity: 1;
  width: 8px;
  border-radius: 0;
  background: #303452;
}

更改后效果：【默认显示了，但仍无法滚动】

 2.想要更改滚动条的颜色

 /* 改变滚动条颜色，或者把/deep/替换成::v-deep  */
/deep/.el-scrollbar__thumb {
  background: #8e97d9;
}

 3.解决无法滚动的问题：

3.1要给el-scrollbar设置高度：

 3.2并且他要给父盒子也设置高度：

/* 滚动条父盒子样式 */
.scrollbar-fbox {
  height: calc(100vh - 90px);
  overflow: auto;
  margin-top: -16px;
}