效果图
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/4ba106f767b3432ab1e0b30f157fdbf2.png)
实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.scrollbar {
width: 300px;
height: 300px;
overflow: auto;
margin-top: 100px;
}
.content {
width: 500px;
height: 500px;
}
.scrollbar::-webkit-scrollbar {
width: 20px;
height: 20px;
}
.scrollbar::-webkit-scrollbar-thumb {
opacity: 0.8;
background: rgba(0, 129, 255, 0.30);
border-radius: 10px;
border: 6px solid transparent;
background-clip: content-box;
}
.scrollbar::-webkit-scrollbar-track-piece {
background: rgba(0, 129, 255, 0.03);
}
.scrollbar::-webkit-scrollbar-track-piece:vertical {
border-left: 1px solid #e1edfd;
border-right: 1px solid #e1edfd;
}
.scrollbar::-webkit-scrollbar-track-piece:horizontal {
border-top: 1px solid #e1edfd;
border-bottom: 1px solid #e1edfd;
}
</style>
</head>
<body>
<div class="scrollbar">
<div class="content"></div>
</div>
</body>
</html>