css修改谷歌浏览器和火狐浏览器的滚动条样式

一时失言乱红尘 2023-02-18 14:24 354阅读 0赞

**css代码**

*谷歌浏览器滚动条样式：*

::-webkit-scrollbar {
      background: #f7f7f9;
      width: .08rem;  /* 纵向滚动条滑块宽度 */
      height: .09rem; /* 横向滚动条滑块宽度 */
    }
    ::-webkit-scrollbar-track-piece { /*滚动条背景颜色*/
      background: #f7f7f9;
    }
    ::-webkit-scrollbar-thumb { /* 滑块 */
      border-radius: .1rem;
      background: #e5e5e5;
    }
    // 也可以单独设置横向滚动条和纵向滚动条的背景颜色
    ::-webkit-scrollbar-thumb:vertical { /* 纵向滑块 */
      background: #e5e5e5;
    }
    ::-webkit-scrollbar-thumb:horizontal { /* 横向滑块 */
      background: #e5e5e5;
    }

*火狐浏览器滚动条样式：*

* {
      scrollbar-color: #e5e5e5 #f7f7f9; /* 滑块颜色  滚动条背景颜色 */
      scrollbar-width: thin; /* 滚动条宽度有三种：thin、auto、none */
    }

**效果图**  
*谷歌浏览器效果*  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbnppX29ubHk_size_16_color_FFFFFF_t_70]  
*火狐浏览器效果*  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbnppX29ubHk_size_16_color_FFFFFF_t_70 1]  
**其他浏览器**  
IE浏览器都不支持这些属性，所以在IE浏览器下滚动条没办法用css设置，其他浏览器暂时没试过，大家可以自己尝试。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbnppX29ubHk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200618142209120.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbnppX29ubHk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbnppX29ubHk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200618142318368.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbnppX29ubHk=,size_16,color_FFFFFF,t_70