滚动条设置兼容chrome和ie

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

Aimee芊

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

阅读量1.6k

点赞数

分类专栏： css相关文章标签：滚动条 css滚动条滚动条设置 H5滚动条设置滚动条兼容

本文链接：https://blog.youkuaiyun.com/Aimee1608/article/details/83016132

版权

css相关专栏收录该内容

4 篇文章

订阅专栏

滚动条设置

如图红框里的滚动条，设置长度和宽度，以及背景颜色和滚动条颜色

chrome css 样式设置

/* 滚动条样式 .wrap为滚动盒子的class*/
/* chrome */ 
.wrap::-webkit-scrollbar {/*滚动条整体样式*/
    width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}
.wrap::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    border-radius: 4px;
    background: #A1A1A1;
}
.wrap::-webkit-scrollbar-track {/*滚动条里面轨道*/
    border-radius: 4px;
    background: #F9F9F9;
    margin: 30px 0;
}

ie 浏览器样式

/* ie */
.wrap{
    scrollbar-arrow-color: #A1A1A1; /**//*三角箭头的颜色*/ 		
    scrollbar-face-color: #A1A1A1; /**//*立体滚动条的颜色*/ 		
    scrollbar-3dlight-color: transparent; /**//*立体滚动条亮边的颜色*/ 		
    scrollbar-highlight-color: transparent; /**//*滚动条空白部分的颜色*/ 		
    scrollbar-shadow-color: transparent; /**//*立体滚动条阴影的颜色*/ 		
    scrollbar-darkshadow-color: transparent; /**//*立体滚动条强阴影的颜色*/ 		
    scrollbar-track-color: #F9F9F9; /**//*立体滚动条背景颜色*/ 		
    scrollbar-base-color: transparent; /**//*滚动条的基本颜色*/
}