CSS自定义滚动条样式,兼容IE浏览器

经常写页面的同学都知道,浏览器一般自带的滚动条样式很丑,和页面风格格格不入,于是就想着是否能够改变原有滚动条样式?但实际中,其他浏览器又和IE浏览器不一样,导致兼容性不好。

chrome浏览器滚动条自定义样式修改:
div{
  /*滚动条滑块按钮的颜色*/
  scrollbar-face-color: #134187;
  /*滚动条整体颜色*/
  scrollbar-highlight-color: #134187;
  /*滚动条轨道颜色*/
  scrollbar-track-color: #011433;
}
/*滚动条整体部分,必须要设置*/
::-webkit-scrollbar{
  background-color: #011433;
  width:10px;
  height:10px;
}
/*滚动条的轨道*/
::-webkit-scrollbar-track{
  background-color: #011433;
  border-radius: 10px;
}
/*滚动条的滑块按钮*/
::-webkit-scrollbar-thumb{
  border-radius: 10px;
  background-color: #134087;
}
IE浏览器滚动条自定义样式修改:

在写样式之前,我们看一下IE浏览器滚动条样式设置位置参考图:
在这里插入图片描述
在这里插入图片描述
样式修改代码:

//Ie下滚动条样式
HTML {
  scrollbar-base-color: #134087;
  //scrollbar-base-color: #134087;
  scrollbar-3dlight-color:#134087;
  scrollbar-highlight-color: #134087;
  scrollbar-track-color: #011433;
  scrollbar-arrow-color: #011433;
  scrollbar-shadow-color:#011433;
  //scrollbar-dark-shadow-color: #011433;
}
  • 1
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值