自定义滚动条样式,设置样式即可:
/* 设置滚动条的样式 */
::-webkit-scrollbar {
width: 8px;
height: 8px;
background: transparent;
position: fixed;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
border-radius: 10px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
opacity: 1;
background: transparent;
border-radius: 4px;
}
* {
&:hover {
::-webkit-scrollbar-thumb {
opacity: 1;
background: rgba($color: #e2e2e2, $alpha: 1);
}
}
}
演示:
![2f884a782e5bd6f02333fc077da427f0.png](https://i-blog.csdnimg.cn/blog_migrate/dba1847ecf6f84c621f6e8db6261b104.jpeg)