天天看點

自定義浏覽器滾動條scrollbar樣式(IE、Firefox、webkit核心浏覽器)

1 IE浏覽器

1.1  IE浏覽器對滾動條的樣式屬性如下表:

自定義浏覽器滾動條scrollbar樣式(IE、Firefox、webkit核心浏覽器)

1.2 滾動條各樣式圖示:

自定義浏覽器滾動條scrollbar樣式(IE、Firefox、webkit核心浏覽器)

 2 webkit核心

滾動條樣式屬性 

自定義浏覽器滾動條scrollbar樣式(IE、Firefox、webkit核心浏覽器)

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

插件:jquery-custom-content-scroller

自定義浏覽器滾動條scrollbar樣式(IE、Firefox、webkit核心浏覽器)

http://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" target="_blank" rel="external nofollow"  >
<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;

  }

 參考博文:小天地,大世界,前端部落格