<div class="box"> <div class="content"></div> </div> <style> .box{ width: 100px; height: 200px; overflow: auto; } .content{ width: 100px; height: 1000px; } </style>
此时滚动条是浏览器默认样式,有点丑
可以修改滚动条样式,代码如下:
.box::-webkit-scrollbar { width: 6px; // 滚动条宽度 } .box::-webkit-scrollbar-thumb { background: #ddd; // 滑块颜色 border-radius: 4px; // 滑块圆角 } .box::-webkit-scrollbar-thumb:hover { background: #ccc; // 鼠标移入滑块颜色 }