自定義滾動條mCustomScrollbar

時間  2019-12-13
標籤 自定義 滾動條 mcustomscrollbar 简体版
原文   原文鏈接

mCustomScrollbar 是個基於 jQuery UI 的自定義滾動條插件，它可讓你靈活的經過 CSS 定義網頁的滾動條，而且垂直和水平兩個方向的滾動條均可以定義，它經過 Brandon Aaron jquery mouse-wheel plugin 提供了鼠標滾動的支持，而且在滾動的過程當中，還能夠緩衝滾動使得滾動更加的平滑，還能夠自動調整滾動條的位置和定義滾動到的位置等。(HTML必須存在於文檔流, 不能爲display:none)javascript

 

1.如何使用 mCustomScrollbar(必需要加載以下的4個文件)css

jquery.mCustomScrollbar.js
jquery.mousewheel.min.js
jquery.mCustomScrollbar.css
mCSB_buttons.pnghtml

 

jQuery：這個插件的必備庫
jQuery UI：擴展 jQuery 庫而且爲咱們的滾動條提供了簡單的動畫和拖動功能。
jquery.mousewheel.min.js：這是 Brandon Aaron 編寫的一個偉大的只有2kb的插件，它面向全部的操做系統和瀏覽器，爲咱們提供了鼠標滾動事件的支持。
jquery.mCustomScrollbar.js：這是咱們的插件主文件。在插件包的 minified 你能夠找到它的壓縮版。
jquery.mCustomScrollbar.css： 這個 CSS 文件是讓咱們來定義邊欄用的。你能夠在這個文件中定義你的邊欄，固然你能夠在其餘的 CSS 文件中定義，要注意的是，你要用 CSS 中的順序，其中的優先級關係來覆蓋這個文件中的定義。
mCSB_buttons.png： 這個 png 圖片文件，包含了向上向下向左向右滾動的按鈕。可使用 CSS sprites 技術，來使用這個圖片中的相應按鈕。插件包中包含了這個圖片的 PSD 源文件（sources/mCSB_buttons.psd ），你能夠根據本身的需求自定義。java

其實若是隻是簡單的滾動條，只要加載以下2個文件便可
jquery.mCustomScrollbar.js
jquery.mCustomScrollbar.cssjquery

第一步：加載 mCustomScrollbar 的樣式文件。ajax

<link href="css/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />瀏覽器

 

第二步：加載必須的 JS 文件。app

須要加載的文件有以下幾個：jQuery、jQuery UI， jquery.mousewheel.min.js 和 jquery.mCustomScrollbar.js 這四個。
jQuery 和 jQuery UI 是必須的， jquery.mousewheel.min.js 是用來提供滾動支持的，jquery.mCustomScrollbar.js 則是插件的主文件。
<script src="js/jquery.mCustomScrollbar.js" type="text/javascript"><\/script>
<script src="js/jquery.mousewheel.min.js" type="text/javascript"><\/script>ide

 

第三步：應用 mCustomScrollbar函數

$(function(){
　　$("#id").mCustomScrollbar();
})

 

mCustomScrollbar 的參數介紹

複製代碼 
setWidth: false                                 //設置你內容的寬度 值能夠是像素值或者百分比(string),取值300,"30%"
setHeight: false                                //設置你內容的高度 值能夠是像素值或者百分比(string),取值300,"30%"
setTop: 0                                       //設置一開始縱向滾動的位置,取值"100px",值爲字符串
setLeft: 0                                      //設置一開始橫向滾動的位置,取值"100px",值爲字符串
axis: "string"                                  //"x","y",值爲字符串，分別對應橫縱向滾動
scrollInertia:Integer                           //滾動的慣性值 在毫秒中 使用0能夠無滾動慣性 (滾動慣性可使區塊滾動更加平滑)
scrollbarPosition: "string"                     //取值"inside","outside",值爲字符串,父元素必須是relative定位，滾動條出在元素的內部(inside)或者外部(outside);
autoDraggerLength:Boolean：                     //根據內容區域自動調整滾動條拖塊的長度 值:true,false
alwaysShowScrollbar:Integer                     //保持滾動條的顯示，取值0,1(保持滾動塊可見),2(保持滾動條全部的顯示)
mouseWheel:{ 
    enable: boolean                             //啓用或禁用經過鼠標滾輪滾動內容。
    scrollAmount: Integer                       //滾輪滾動的像素
    invert: boolean                             //反轉滾動方向
}         

scrollButtons:{ enable:Boolean }                //是否添加 滾動條兩端按鈕支持 值:true,false
scrollButtons:{ scrollType:String }             //滾動按鈕滾動類型 值:」continuous」(當你點擊滾動控制按鈕時斷斷續續滾動) 「pixels」(根據每次點擊的像素數來滾動) 點擊這裏能夠看到形象的例子
scrollButtons:{ scrollSpeed:Integer }           //設置點擊滾動按鈕時候的滾動速度(默認 20) 設置一個更高的數值能夠更快的滾動
scrollButtons:{ scrollAmount:Integer }          //設置點擊滾動按鈕時候每次滾動的數值 像素單位 默認 40像素

advanced:{ updateOnBrowserResize:Boolean }      //根據百分比爲自適應佈局 調整瀏覽器上滾動條的大小 值:true,false 設置 false 若是你的內容塊已經被固定大小
advanced:{ updateOnContentResize:Boolean }      //自動根據動態變換的內容調整滾動條的大小 值:true,false 設置成 true 將會不斷的檢查內容的長度而且據此改變滾動條大小 建議除非必要不要設置成 true 若是頁面中有不少滾動條的時候 它有可能會產生額外的移出 你可使用 update 方法來替代這個功能
advanced:{ autoExpandHorizontalScroll:Boolean } //自動擴大水平滾動條的長度 值:true,false 設置 true 你能夠根據內容的動態變化自動調整大小 能夠看Demo
advanced:{ autoScrollOnFocus:Boolean }          //是否自動滾動到聚焦中的對象 例如表單使用相似TAB鍵那樣跳轉焦點 值:true false

callbacks:{ onScrollStart:function(){} }        //使用自定義的回調函數在滾動時間開始的時候執行 具體請看Demo
callbacks:{ onScroll:function(){} }             //自定義回調函數在滾動中執行 Demo 同上
callbacks:{ onTotalScroll:function(){} }        //當滾動到底部的時候調用這個自定義回調函數 Demo 同上
callbacks:{ onTotalScrollBack:function(){} }    //當滾動到頂部的時候調用這個自定義回調函數 Demo 同上
callbacks:{ onTotalScrollOffset:Integer }       //設置到達頂部或者底部的偏移量 像素單位
callbacks:{ whileScrolling:function(){} }       //當用戶正在滾動的時候執行這個自定義回調函數
callbacks:{ whileScrollingInterval:Integer }    //設置調用 whileScrolling 回調函數的時間間隔 毫秒單位
複製代碼

 

//默認值

複製代碼 
(function($){
    $(document).ready(function(){
        $("#content").mCustomScrollbar({
            setWidth: false,            
            setHeight: false,          
            setTop: 0,          
            setLeft: 0,                 
            axis: "y",             
            scrollInertia:0,
            scrollbarPosition: "inside",
            autoDraggerLength:false
            autoExpandScrollbar:true
            alwaysShowScrollbar:2
            mouseWheel:{
                enable:true
                scrollAmount:10
                preventDefault:true
                invert:true
            },
            scrollButtons:{
                enable:false,
                scrollType:"continuous",
                scrollSpeed:20,
                scrollAmount:40
            },
            advanced:{
                updateOnBrowserResize:true,
                updateOnContentResize:false,
                autoExpandHorizontalScroll:false,
                autoScrollOnFocus:true
            },
            callbacks:{
                onScrollStart:function(){},
                onScroll:function(){},
                onTotalScroll:function(){},
                onTotalScrollBack:function(){},
                onTotalScrollOffset:0,
                whileScrolling:false,
                whileScrollingInterval:30
            }
        });
    });
})(jQuery);
複製代碼

 

mCustomScrollbar 的使用方法

update

用法：$(selector).mCustomScrollbar(「update」);

調用 mCustomScrollbar 函數的 update 方法去實時更新滾動條當內容發生變化（例如 經過 Javascript 增長或者移除一個對象、經過 ajax 插入一段新內容、隱藏或者顯示一個新內容等）

下面是例子：


$(".content .mCSB_container").append("<p>New content here...</p>");
$(".content").mCustomScrollbar("update");

$(".content .myImagesContainer").append("<img src='myNewImage.jpg' />");
$(".content .myImagesContainer img").load(function(){
$(".content").mCustomScrollbar("update");
});

$("#content-1").animate({height:800},"slow",function(){
$(this).mCustomScrollbar("update");
});
當新內容徹底加載或者動畫完成以後，update 方法一直被調用。

scrollTo

用法：$(selector).mCustomScrollbar(「scrollTo」,position);

你可使用這個方法自動的滾動到你想要滾動到的位置。這個位置可使用字符串（例如 「#element-id」，「bottom」 等）描述或者是一個數值（像素單位）。下面的例子將會滾動到最下面的對象


$(".content").mCustomScrollbar("scrollTo","last");
scrollTo 方法的參數

$(selector).mCustomScrollbar(「scrollTo」,String);：滾動到某個對象的位置，字符串型的值能夠是 id 或者 class 的名字
$(selector).mCustomScrollbar(「scrollTo」,」top」);：滾動到頂部（垂直滾動條）
$(selector).mCustomScrollbar(「scrollTo」,」bottom」);：滾動到底部（垂直滾動條）
$(selector).mCustomScrollbar(「scrollTo」,」left」);：滾動到最左邊（水平滾動條）
$(selector).mCustomScrollbar(「scrollTo」,」right」);：滾動到最右邊（水平滾動條
$(selector).mCustomScrollbar(「scrollTo」,」first」);：滾動到內容區域中的第一個對象位置
$(selector).mCustomScrollbar(「scrollTo」,」last」);：滾動到內容區域中的最後一個對象位置
$(selector).mCustomScrollbar(「scrollTo」,Integer);：滾動到某個位置（像素單位）
scrollTo 方法還有兩個額外的選項參數

moveDragger: Boolean：滾動滾動條的滑塊到某個位置像素單位，值：true，flase。例如：$(selector).mCustomScrollbar(「scrollTo」,200,{ moveDragger:true });
callback：Boolean：執行回調函數當 scroll-to 完成以後，值：true，false 例如：$(selector).mCustomScrollbar(「scrollTo」,200,{ callback:true });
disable

用法：$(selector).mCustomScrollbar(「disable」);

調用 disable 方法去使滾動條不可用。若是想使其從新可用，調用 update方法。disable 方法使用一個可選參數（默認 false）你能夠設置 true 若是你想從新讓內容區域滾動當 scrollbar 不可用時。例如：


$(".content").mCustomScrollbar("disable",true);
能夠看一些使用 disable 的例子

destroy

用法：$(selector).mCustomScrollbar(「destroy」);

調用 destroy 方法能夠移除某個對象的自定義滾動條而且恢復默認樣式

能夠看一些使用 destroy 的例子

 

定義滾動條外觀

滾動條的 HTML 結構

複製代碼 
//垂直滾動條結構：
<div class="content mCustomScrollbar _mCS_1">
  <div class="mCustomScrollBox">
    <div class="mCSB_container">
      <!-- your long content here... -->
    </div>
    <div class="mCSB_scrollTools">
      <a class="mCSB_buttonUp"></a>
      <div class="mCSB_draggerContainer">
        <div class="mCSB_dragger ui-draggable">
          <div class="mCSB_dragger_bar"></div>
        </div>
        <div class="mCSB_draggerRail"></div>
      </div>
      <a class="mCSB_buttonDown"></a>
    </div>
  </div>
</div>

//水平滾動條 mCSB_buttonUp 和 mCSB_buttonDown 這兩個 a 標籤只有當你啓用了 scroll buttons 功能的時候，纔可用。
  <div class="mCustomScrollBox mCSB_horizontal">
    <div class="mCSB_container">
      <!-- your long content here... -->
    </div>
    <div class="mCSB_scrollTools">
      <a class="mCSB_buttonLeft"></a>
      <div class="mCSB_draggerContainer">
        <div class="mCSB_dragger ui-draggable">
          <div class="mCSB_dragger_bar"></div>
        </div>
        <div class="mCSB_draggerRail"></div>
      </div>
      <a class="mCSB_buttonRight"></a>
    </div>
  </div>
</div>
複製代碼

知道這些以後，咱們就能夠來定義滾動條樣式了，對於同一頁面多個滾動條，官方推薦以下的寫法：
//每一個容器都有個ID,如第一個是_mCS_1,如第二個是_mCS_2,如第三個是_mCS_3

複製代碼 
._mCS_1 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
    // 1st scrollbar dragger style... 
}
._mCS_2 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
    // 2nd scrollbar dragger style... 
}
._mCS_3 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
    // 3rd scrollbar dragger style... 
}
複製代碼

 

例如：

複製代碼 
._mCS_1 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{  }           //小滾動條的背景色
._mCS_1 .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{  }    //小滾動條hover上去的顏色
._mCS_1 #mCSB_1_scrollbar_vertical .mCSB_dragger{ height: 100px; }          　　　　　　　　　　 //小滾動條的寬高
._mCS_1 .mCSB_scrollTools .mCSB_draggerRail{width:10px;}                    　　　　　　　　　　 //長滾動條的寬高
._mCS_1 .mCSB_scrollTools .mCSB_draggerRail:hover{background:yellow;}       　　　　　　　　　　 //長滾動條hover上去的顏色
._mCS_1 .mCSB_scrollTools .mCSB_buttonUp{background-position:-83px 0;}      　　　　　　　　　　 //小銨鈕圖標背景
._mCS_1 .mCSB_scrollTools .mCSB_buttonDown{background-position:-83px 0;}    　　　　　　　　　　 //小銨鈕圖標背景
._mCS_1 ._mCS_1 .mCSB_inside > .mCSB_container{margin-right:0px;}           　　　　　　　　　　 //內容與滾動條的距離
._mCS_1 .mCSB_scrollTools{right:0px;}                                       　　　　　　　　　　 //滾動條的位置
複製代碼

 

轉載：https://www.cnblogs.com/alantao/p/5239262.html

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程