滾動條插件使用 --筆記

引用地址和demo

---

簡要教程

---

malihu是一款高性能的滾動條美化jQuery插件。該滾動條美化插件支持水平和垂直滾動條，支持鼠標滾動，支持鍵盤滾動和支持移動觸摸屏。並且它可以和jQuery UI和Bootatrap完美的結合，相當的強大。它的特點有：

• 支持垂直和水平滾動條
• 可調整滾動的動量
• 支持鼠標滾輪、鍵盤和移動觸摸來移動滾動條
• 預定義主題，並且可以通過CSS來修改主題
• 支持RTL方向
• 提供大量參數來支持滾動條的美化和功能實現
• 提供大量方法來控制滾動條
• 用戶自定義回調函數
• 可選擇和搜索內容

安裝

---

可以通過Bower或nmp來安裝該滾動條美化插件。
bower install malihu-custom-scrollbar-plugin
npm install malihu-custom-scrollbar-plugin

## 使用方法 — 使用該滾動條美化插件需要引入`jQuery`和`jquery.mCustomScrollbar.concat.min.js`以及`jquery.mCustomScrollbar.css`文件。

<link rel="stylesheet" href="/path/to/jquery.mCustomScrollbar.css" />
<script src="jquery/1.11.1/jquery.min.js"></script>
<script src="/path/to/jquery.mCustomScrollbar.concat.min.js"></script>

通過js來初始化

可以在頁面加載完畢之後使用下面的方法來初始化該插件。

<script>
    (function($){
        $(window).load(function(){
            $(".content").mCustomScrollbar();
        });
    })(jQuery);
</script>      

通過HTML來初始化

也可以在HTML中直接初始化該滾動條插件。

<div class="mCustomScrollbar" data-mcs-theme="dark">
  <!-- your content -->
</div>       

另外可以通過data-mcs-axis屬性來設置是水平還是垂直滾動條，取值爲x或y。

基本配置參數

水平或垂直反向配置：
默認情況下該滾動條是垂直方向的滾動條，你可以通過配置參數將它設置爲水平滾動條或兩個方向上滾動條。

$(".content").mCustomScrollbar({
    axis:"x" // 水平滾動條
});                
$(".content").mCustomScrollbar({
    axis:"yx" // 水平和垂直同時存在的滾動條
}); 

滾動條主題：
你可以通過參數將滾動條的主題設置爲任何預定義的主題。

$(".content").mCustomScrollbar({
    theme:"dark"
});  

瀏覽器兼容
Internet Explorer 8+
Firefox
Chrome
Opera
Safari
iOS
Android
Windows Phone

更多學習