效果:
![](https://i-blog.csdnimg.cn/blog_migrate/c775546322dfedc1ef15a0d61dd89d7e.png)
代码:
/* 整个滚动条 */
&::-webkit-scrollbar {
width: 20px;
height: 20px;
}
/* 滚动条上的滚动滑块 */
&::-webkit-scrollbar-thumb {
background-color: #49b1f5;
/* 关键代码 */
background-image: -webkit-linear-gradient(45deg,
rgba(255, 255, 255, 0.4) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.4) 50%,
rgba(255, 255, 255, 0.4) 75%,
transparent 75%,
transparent);
// border-radius: 32px; // 如果想要圆角就放开
}
/* 滚动条轨道 */
&::-webkit-scrollbar-track {
background-color: #dbeffd;
// border-radius: 32px; // 如果想要圆角就放开
}