css更改滚动条样式

项目中经常使用滚动条，默认的滚动条样式不大合适，需要进行调整。效果如下图(为保证效果明显，设置了滚动条的颜色为正红色)

代码如下图。一般将滚动条的样式设置放在公共样式文件中，以确保项目中的所有滚动条样式修改。

::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-thumb {
    border-radius: 5px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: red;
}

::-webkit-scrollbar-track{
    width:5px;
}

你可以使用以下伪元素选择器去修改基于 webkit 的浏览器的滚动条样式：

::-webkit-scrollbar——整个滚动条。

::-webkit-scrollbar-thumb——滚动条上的滚动滑块。

::-webkit-scrollbar-track——滚动条轨道。

::-webkit-scrollbar-button——滚动条上的按钮（上下箭头）。

::-webkit-scrollbar-track-piece——滚动条没有滑块的轨道部分。

::-webkit-scrollbar-corner——当同时有垂直滚动条和水平滚动条时交汇的部分。通常是浏览器窗口的右下角。

::-webkit-resizer——出现在某些元素底角的可拖动调整大小的滑块。