一、默认的滚动条
很宽很占地方,不美观,与页面设计格格不入。
二、优化后的滚动条
很美观,可以根据实际风格调整颜色,宽度,高度等。
三、优化代码
在全局样式里加入以下代码,或者在需要使用的地方单独引入:
1、 #17B3A3 滚动条颜色,可以自行修改。
2、宽度、高度等参数可以根据自己的需求设定。
::-webkit-scrollbar {
width: 6px;
}
// 滚动条的滑块
::-webkit-scrollbar-thumb {
background-color: #17B3A3;
border-radius: 3px;
}
// 修改表格(el-table)的滚动条
.el-table__body-wrapper::-webkit-scrollbar {
width: 8px;
height: 8px;
}
// 滚动条的滑块
.el-table__body-wrapper::-webkit-scrollbar-thumb {
background-color: #17B3A3;
border-radius: 3px;
}
END
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)