一、滚动条的使用:

<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;
}

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐