css 修改滚动条样式

936 阅读1分钟

针对谷歌浏览器有效

IE浏览器下的滚动条不能设置宽高、结构,只允许修改颜色,当IE浏览器不能与谷歌滚动条样式调成完全一样时,还是写两种滚动条吧~勉强不来的哦!

html 代码

< div class="ivu-cascader-menu">

css 代码

.ivu-cascader-menu{ max-height:400px; overflow: auto; }

.ivu-cascader-menu::-webkit-scrollbar {/滚动条整体样式/ width: 10px; /高宽分别对应横竖滚动条的尺寸/ height: 1px; }

.ivu-cascader-menu::-webkit-scrollbar-thumb {/滚动条里面小方块/ border-radius: 10px; -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);

    background: rgba(193,193,193);

}

.ivu-cascader-menu::-webkit-scrollbar-track {/滚动条里面轨道/ -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); border-radius: 10px; background: #EDEDED; }

ie 浏览器 *{

/三角箭头的颜色/

scrollbar-arrow-color: #c0c4cc;

/滚动条滑块按钮的颜色/

scrollbar-face-color: #A2A2A3;

/滚动条整体颜色/

scrollbar-highlight-color: #A2A2A3;

/滚动条阴影/

scrollbar-shadow-color: #A2A2A3;

/滚动条轨道颜色/

scrollbar-track-color: #f4f4f5;

/滚动条3d亮色阴影边框的外观颜色——左边和上边的阴影色/

scrollbar-3dlight-color:#A2A2A3;

/滚动条3d暗色阴影边框的外观颜色——右边和下边的阴影色/

scrollbar-darkshadow-color: #A2A2A3;

/滚动条基准颜色/

scrollbar-base-color: #f4f4f5; }

设置出来结果