Luckysheet 设置滚动条颜色

Vue3 + element-plus + pinia，默认深色主题，在引用了Luckysheet之后发现滚动条的默认样式不太友好，因此做了一些调整

效果

1、理想效果

2、默认效果

一、引用并使用Luckysheet

如何在项目中使用Luckysheet的具体步骤请看这里，有完整示例哦

Vue Luckyexcel 将文件流转成file文件后使用Luckysheet回显数据 - 附完整示例-CSDN博客

二、调整样式CSS

/* 针对 Chrome 和 Safari */
#luckysheet::-webkit-scrollbar {
	width: 12px; /* 滚动条宽度 */
}

#luckysheet::-webkit-scrollbar-track {
	background: #f1f1f1; /* 滚动条轨道颜色 */
}

#luckysheet::-webkit-scrollbar-thumb {
	background: #888; /* 滚动条颜色 */
	border-radius: 10px; /* 圆角 */
}

#luckysheet::-webkit-scrollbar-thumb:hover {
	background: #555; /* 滚动条悬停颜色 */
}

/* 针对 Firefox */
#luckysheet {
	scrollbar-width: thin; /* 滚动条宽度 */
	scrollbar-color: #888 #f1f1f1; /* 滚动条颜色及轨道颜色 */
}

 欢迎扫描下方二维码关注VX公众号