[分享]css兼容各个浏览器的滚动条

CSS是网页设计不可或缺的一部分，但是不同的浏览器对CSS的支持并不完全一致，其中涉及到滚动条的样式更是各有特点。我们可以通过CSS代码的编写实现滚动条的样式美化及兼容性处理。/统一滚动条样式/ ::...

CSS是网页设计不可或缺的一部分，但是不同的浏览器对CSS的支持并不完全一致，其中涉及到滚动条的样式更是各有特点。我们可以通过CSS代码的编写实现滚动条的样式美化及兼容性处理。

/*统一滚动条样式*/
::-webkit-scrollbar {
    width: 8px;
    height: 6px;
}
/*滑块*/
::-webkit-scrollbar-thumb {
    background-color: #979797;
    border-radius: 4px;
}
/*滑轨*/
::-webkit-scrollbar-track {
    background-color: #f4f4f4;
    border-radius: 0;
}
/*这些属性对应的是webkit内核的浏览器，如Chrome、Safari和Opera等浏览器*/

/*Firefox内核浏览器的滚动条样式*/
scrollbar-color: #979797 #f4f4f4;
/*该属性是依据CSS Scrollbars Module Level 1标准才实现的一项CSS属性，尚未被所有浏览器完全支持，需要加上-webkit-前缀进行兼容*/

/*IE浏览器及Edge浏览器滚动条样式*/
scrollbar-base-color:#979797;
scrollbar-face-color:#f4f4f4;
scrollbar-arrow-color:#979797;
/*需要注意的是，该样式只在IE浏览器及Edge浏览器中有效*/ 

以上是基本的滚动条样式代码，对不同浏览器的兼容性处理也需要我们去了解和尝试。