1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 自定义浏览器滚动条scrollbar样式(IE Firefox webkit内核浏览器)

自定义浏览器滚动条scrollbar样式(IE Firefox webkit内核浏览器)

时间:2019-04-15 21:58:13

相关推荐

自定义浏览器滚动条scrollbar样式(IE Firefox webkit内核浏览器)

1 IE浏览器

1.1 IE浏览器对滚动条的样式属性如下表:

1.2 滚动条各样式图示:

2webkit内核

滚动条样式属性

3FireFox浏览器——使用jquery插件

插件:jquery-custom-content-scrollerhttp://manos.malihu.gr/jquery-custom-content-scroller/

使用案例:

<!doctype html><html><head><meta charset="utf-8"><title></title><!--第一步:引入:滚动条相应的样式表文件和jquery的库文件--><link rel="stylesheet" type="text/css" href="jquery.mCustomScrollbar.css" ><script src="jquery.min.js"></script><script src="jquery.mCustomScrollbar.concat.min.js"></script><!--第二步:加载--><script>(function($){$(window).load(function(){$(".content").mCustomScrollbar();});})(jQuery);</script></head><body><!--第三步:在要显示滚动条的元素加入 class="content" --><div class="content"></div></body></html>

4 不同浏览器隐藏滚动条的方式

.content{

height: 100%;

overflow: auto;

//谷歌

&::-webkit-scrollbar {

display: none;

}

//IE

-ms-overflow-style: none;

//firefox

scrollbar-width: none;

}

参考博文:小天地,大世界,前端博客

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。