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;
}
参考博文:小天地,大世界,前端博客