很简单的几行代码
<!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>
最终效果图：
