CSS滚动条样式兼容IE8和Chrome浏览器

最新推荐文章于 2024-04-14 00:48:11 发布

有趣的前端

最新推荐文章于 2024-04-14 00:48:11 发布

阅读量538

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/wys997/article/details/124430760

版权

css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

针对IE8：

.scroll {

scrollbar-face-color:#FB4446; /*滚动条3D表面（ThreedFace）的颜色*/

scrollbar-highlight-color:#fff; /*滚动条3D界面的亮边（ThreedHighlight）颜色*/

scrollbar-shadow-color:#eeeeee; /*滚动条3D界面的暗边（ThreedShadow）颜色*/

scrollbar-3dlight-color:#eeeeee; /*滚动条亮边框颜色*/

scrollbar-arrow-color:#000; /*滚动条方向箭头的颜色 */

scrollbar-track-color:#fff; /*滚动条的拖动区域(TrackBar)颜色*/

scrollbar-darkshadow-color:#fff; /*滚动条暗边框（ThreedDarkShadow）颜色*/ }

针对Chrome：

/*---滚动条默认显示样式--*/ 

::-webkit-scrollbar-thumb{  

   background-color:#FB4446;  

   height:50px;  

   outline-offset:-2px;  

   outline:2px solid #fff;  

   -webkit-border-radius:4px;  

   border: 2px solid #fff;  

}  

/*---鼠标点击滚动条显示样式--*/ 

::-webkit-scrollbar-thumb:hover{  

   background-color:#F01360;  

   height:50px;  

   -webkit-border-radius:4px;  

}  

/*---滚动条大小--*/ 

::-webkit-scrollbar{  

   width:8px;  

   height:8px;  

}  

/*---滚动框背景样式--*/ 

::-webkit-scrollbar-track-piece{  

   background-color:#fff;  

   -webkit-border-radius:0;  

}