css自定义滚动条

somboy 2020-02-02

某个div(class="box"),设置了它的属性overflow: scroll。溢出部分会以滚动的形式显示。这时,可以对这个div设置这部分的滚动条的样式了。

.box::-webkit-scrollbar {
    width: 6px;
    height: 200px;
}

/*滚动条滑块*/
.box::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow: inset 0 0 5px #d8d8d8;
    background: #535353;
}

/*滚动条轨道*/
.box::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px #d8d8d8;
    border-radius: 10px;
    background: #ededed;
}

相关推荐