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;
}
新一代开源开发者平台 GitCode,通过集成代码托管服务、代码仓库以及可信赖的开源组件库,让开发者可以在云端进行代码托管和开发。旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。
更多推荐


所有评论(0)