一、默认的滚动条
很宽很占地方,不美观,与页面设计格格不入。
二、优化后的滚动条
很美观,可以根据实际风格调整颜色,宽度,高度等。
三、优化代码
在全局样式里加入以下代码,或者在需要使用的地方单独引入:
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;}