el-scrollbar 滚动条

一、滚动条的使用:


    
    
内容

二、遇到问题:

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

问题原图:

el-scrollbar 滚动条_第1张图片

 

 解决方案:

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

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

el-scrollbar 滚动条_第2张图片

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

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

el-scrollbar 滚动条_第3张图片

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

3.1要给el-scrollbar设置高度:

el-scrollbar 滚动条_第4张图片

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

el-scrollbar 滚动条_第5张图片

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

你可能感兴趣的:(vue.js,前端,javascript)