css 修改滚动条样式

项目经常用到，做一下记录。

• 修改滚动条的整体外观

        设置滚动条的宽度和高度（`::-webkit-scrollbar`）；

        为滚动条添加边框半径以使其看起来更美观（`border-radius`）。

::-webkit-scrollbar {
    //修改滚动条宽度或高度
    width: 12px;
    border-radius: 8px;
}

• 修改滑块的颜色和样式

        使用`::-webkit-scrollbar-thumb`作为伪类选择器来改变滑块的颜色和样式，可以在此基础上添加鼠标移入时的样式。

        滑块的宽度默认与滚动条宽度一致，同时也可以自己设置滑块的宽度

::-webkit-scrollbar-thumb {
    border-radius: 8px;
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5);
    background: #f00;
}
//可以添加鼠标移入样式
::-webkit-scrollbar-thumb:hover {
    background: #ff0;
}

• 修改滚动条轨道的样式

        使用`::-webkit-scrollbar-track`作为伪类选择器来改变滚动条轨道的颜色和样式

::-webkit-scrollbar-track {
    border-radius: 8px;
    background: #999;
}

• 滚动条中的两端箭头按钮

        使用`::-webkit-scrollbar-button`作为伪类选择器来改变滚动条两端箭头的颜色

::-webkit-scrollbar-button {
    background: #f00;
}

PS: 滚动条也可以单独设置水平或者垂直方向的样式，即：

        水平方向 :horizontal

        垂直方向  :vertical

//水平方向滚动条
::-webkit-scrollbar:horizontal {
    width: 20px;
}
//垂直方向滚动条
::-webkit-scrollbar:vertical {
    width: 30px;
}