1. 犀牛前端部落首页
  2. CSS百科

解决IE11滚动条丢失样式问题

今天俺跟大家分享一个工作中遇到的一个小问题,那就是IE11滚动条右边的样式丢失问题,俺一开始是使用的nicescroll这个插件,该插件在IE的兼容上不是很好,应该是使用了什么IE11不支持的属性。解决的办法就是改为使用mCustomScrollbar.js这个插件,该插件在IE的兼容上做的还不错。

案例代码如下:

html:

<!--引入文件-->
 <script src="js/app/jquery.mCustomScrollbar.js"></script>

js文件:

//初始化需要滚动的容器
$(".jx-text").mCustomScrollbar({  scrollbarPosition: "outside",
    setTop:0,
    autoDraggerLength:true,
    alwaysShowScrollbar:2,
    mouseWheel:{
        enable: true
    }
});

如果需要修改样式可以这样修改:

//less文件
//配置滚动条样式:
.mCSB_scrollTools .mCSB_draggerRail{
	width: 2px;
	background-color: #cdb383;
}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
	width:6px;
	background-color: #a48a59 !important;
}
.mCSB_scrollTools{
	width: 10px;
}
.mCSB_outside + .mCSB_scrollTools{
right: -10px;
}

以上就是俺的分享,希望能帮助到需要兼容IE11的朋友。

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/1715.html

发表评论

登录后才能评论