自定义滚动条样式兼容所有浏览器

2024-07-08 08:39| 来源: 网络整理| 查看: 265

万恶的浏览器兼容看人家chrome多么友好，几行css就能自定义样式，ie和火狐各种不行，如果只要求部分兼容的可以直接用css写 chorme

.bar{ width:200px; height:200px; overflow-y:scroll; } .bar::-webkit-scrollbar {/*滚动条整体样式*/ width: 10px; /*高宽分别对应横竖滚动条的尺寸*/ height: 1px; } .bar::-webkit-scrollbar-thumb {/*滚动条里面小方块*/ border-radius: 10px; -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); background: #535353; } .bar::-webkit-scrollbar-track {/*滚动条里面轨道*/ -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); border-radius: 10px; background: #EDEDED; }

IE比较少，都以颜色为主 1.scrollbar-arrow-color: color; /三角箭头的颜色/ 2.scrollbar-face-color: color; /立体滚动条的颜色（包括箭头部分的背景色）/ 3.scrollbar-3dlight-color: color; /立体滚动条亮边的颜色/ 4.scrollbar-highlight-color: color; /滚动条的高亮颜色（左阴影？）/ 5.scrollbar-shadow-color: color; /立体滚动条阴影的颜色/ 6.scrollbar-darkshadow-color: color; /立体滚动条外阴影的颜色/ 7.scrollbar-track-color: color; /立体滚动条背景颜色/ 8.scrollbar-base-color:color; /滚动条的基色/ .bar{ scrollbar-arrow-color: #f4ae21; /**//*三角箭头的颜色*/ scrollbar-face-color: #333; /**//*立体滚动条的颜色*/ scrollbar-3dlight-color: #666; /**//*立体滚动条亮边的颜色*/ scrollbar-highlight-color: #666; /**//*滚动条空白部分的颜色*/ scrollbar-shadow-color: #999; /**//*立体滚动条阴影的颜色*/ scrollbar-darkshadow-color: #666; /**//*立体滚动条强阴影的颜色*/ scrollbar-track-color: #666; /**//*立体滚动条背景颜色*/ scrollbar-base-color:#f8f8f8; /**//*滚动条的基本颜色*/ }

最终想要兼容还是要用js… 文档：http://manos.malihu.gr/jquery-custom-content-scroller/ 引入插件 css

使用

( function ( $ ) { $( window ).on( "load", function () { $( ".ScrollBar" ).mCustomScrollbar(); } ); } )( jQuery );

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章