css修改页面内元素的滚动条样式

<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; // 鼠标移入滑块颜色
}