css改变滚动条样式兼容火狐_jq完美解决css滚动条样式IE火狐不兼容问题

上次关于css滚动条样式的文章《美化css滚动条样式，就这么简单》，不够完美不兼容IE、火狐浏览器，但今天这篇文章可以完美解决这个问题，用到了jquery插件jquery.mCustomScrollbar，还是挺好用的，样式主题多够我们用了，也可以自定义样式。

1.使用方法：

1)先引入jquery插件jquery.mCustomScrollbar样式和它的js以及jquery

2)以盒子box为例加上css滚动条$(".box").mCustomScrollbar();

2.例子代码如下：html>

css滚动条样式，jquery插件完美解决ie火狐不兼容问题

.box{

width: 600px;

height: 400px;

margin: 100px auto;

border: 1px solid #000;

border-right: 0;

}

.main{

overflow-x: hidden;

overflow-y: auto;

color: #000;

font-size: 16px;

height: 100%;

}

.main p{height:300px;}

内容1

内容2

内容3

(function($){

$(window).on("load",function(){

$(".box").mCustomScrollbar({

//官网的滚动条主题

theme:"3d-thick-dark"

});

})(jQuery);

3.例子说明：

1)使用了官网的滚动条主题“3d-thick-dark”

2)可以根据你喜好选择的你的主题，点击查看：官网的滚动条主题

3)这个插件只兼容IE8以上

4.最后：

更多参数设置，可以去官网了解下，插件jquery.mCustomScrollbar官网地址：

爆款服务器

除注明外的文章,均为来源:老汤博客,转载请保留本文地址！

css改变滚动条样式兼容火狐_jq完美解决css滚动条样式IE火狐不兼容问题相关推荐

POI 复制不同Sheet合成Excel文件，完美解决单元格样式和角标问题
项目背景: 1.需要从不同的Excel模板中读取Sheet,生成到汇总的Excel文件中 2.Excel格式是 Office2007版本,xlsx格式 3.需要将模板文件的内容和格式,拷贝到新的文件 ...
Excel xlsx file； not supported(xlrd版本不兼容问题，完美解决！)
Excel xlsx file; not supported 第一步:pip uninstall xlrd 第二部:pip install xlrd==1.2.0 原因第一步:pip uninsta ...
css 高度塌陷_css高度塌陷问题如何解决 css高度塌陷问题解决方法
本篇文章小编给大家分享一下css高度塌陷问题解决方法,文中通过示例代码详细的介绍了解决方法,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来一聚教程看看. 1. 高度塌陷在文档流中 ...
css安卓手机位置偏差,完美解决移动端使用rem单位时CSSSprites错位问题_html/css_WEB-ITnose...
移动端网页开发离不开强大的 rem 支持,但由于各尺寸基数未必成比例,以及浏览器的计算偏差,常常会导致 background-position 不够精确,引发 CSS Sprites 错位.下图左侧为 ...
html svg 颜色,通过css改变svg img的颜色
需求如下图,hover的时候改变图标颜色,图标为引入的svg img 一般的解决办法有:1.字体图标改变css的color属性:2.js在hover事件中切换图片:3.老一点的方案是hover切换背景 ...
解决vue项目在ie、360兼容模式下空白页面问题
完美解决vue项目在ie.360兼容模式下空白页面,并提示语法错误的原因艰难路程解决办法艰难路程事实上,很多人在做项目的过程中很多存在同一个问题,于是去百度了,但是用同样的解决方法不一定就能解 ...
css改变谷歌浏览器的滚动条样式
详细内容请点击 /*---滚动条默认显示样式--*/ ::-webkit-scrollbar-thumb{ height:50px; outline-offset:-2px; outline:2px ...
html pdf支持css%写法吗,flying-saucer-pdf终于完美解决了（中文问题，换行问题，分页，页眉页脚，水印）,html+css控制pdf样式...
集成freemarker+flying-saucer-pdf+itext,通过html模板生成PDF 折腾了很久,flying-saucer-pdf终于完美解决了(中文问题,换行问题,页眉页脚,水印) ...
css 超出隐藏滚动条_css 之内容溢出滚动，隐藏滚动条（解决火狐浏览隐藏不了滚动条问题）...
解决火狐浏览隐藏不了滚动条问题 1.里层容器的width多17px,外层容器溢出隐藏,能兼容各个浏览器 .outContainer { width:350px; height:300px; overf ...

css改变滚动条样式兼容火狐_jq完美解决css滚动条样式IE火狐不兼容问题

css改变滚动条样式兼容火狐_jq完美解决css滚动条样式IE火狐不兼容问题相关推荐

最新文章

热门文章