css3自定义滚动条样式

CSS3自定义滚动条样式
滚动条组成
::-webkit-scrollbar    滚动条整体部分
::-webkit-scrollbar-thumb      滚动条滑块
::-webkit-scrollbar-track         滚动条滑动轨道
::-webkit-scrollbar-button      滚动条两端按钮
::-webkit-scrollbar-track-piect       滚动条整体减去滑块部分

less
.content{
    over-flow:auto;

&::-webkit-scrollbar {

width: 4px;

}

&::-webkit-scrollbar-thumb {

border-radius: 15px;

-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);

background: rgba(0, 0, 0, 0.2);

}

&::-webkit-scrollbar-track {

border-radius: 10px;

background: rgba(0, 0, 0, 0.1);

-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);

}

    }