很简单的几行代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
.out {
width: 600px;
height: 600px;
margin: 100px auto;
overflow-y: auto;
}
/* 滚动条整体样式(高宽分别对应横竖滚动条的尺寸) */
.out::-webkit-scrollbar {
width: 5px;
height: 5px;
}
/* 滚动条里面小方块 */
.out::-webkit-scrollbar-thumb {
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.2);
}
/* 滚动条里面轨道 */
.out::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 0;
background: rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<div class="out">
<p style="height:250px;background: #ccc;">段落一</p>
<p style="height:250px;background: #eee;">段落二</p>
<p style="height:250px;background: #ccc;">段落三</p>
</div>
</body>
</html>
最终效果图：
