一个简单的浏览器滚轮样式

image.png
image.png

/*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: #f5f5f5;
}

/*定义滚动条的轨道，内阴影及圆角*/
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 10px rgba(224, 222, 222, 0);
    border-radius: 10px;
    background-color: #f5f5f5;
}

/*定义滑块，内阴影及圆角*/
::-webkit-scrollbar-thumb {
    /*width: 10px;*/
    height: 30px;
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 10px rgba(170, 170, 170, 0.781);
    background-color: rgba(170, 170, 170, 0.103);
}