捲軸美化外掛jquery.nicescroll

今天給大家介紹一個捲軸美化外掛jquery.nicescroll，這個外掛有以下一個主意事項：

1、相容所有最新的桌面瀏覽器和舊版：Chrome，Firefox，Edge，IE8 +，Safari（win / mac），Opera

2、相容移動裝置：iPad / iPhone / iPod，Android 4 +，Blackberry手機和Playbook（WebWorks / Table OS），Windows Phone 8和10

3、相容所有觸控裝置：iPad，Android平板電腦，Window Surface

4、基於jQuery 1.x / 2.x / 3.x分支使用

5、下載地址：

6、程式碼需要放在

$(function() {});

裡面。

 

一、引入相應的外掛

<script type="text/javascript" src="js/jquery-1.12.0.min.js"></script><script type="text/javascript" src="js/jquery.nicescroll.min.js"></script>

 

二、寫好你的容器

<div id="divs" style="height: 150px; width:150px; overflow:hidden; border: 5px solid #000000;">    <p>CGLweb前端部落格</p>    <p>青格勒前端部落格</p>    <p>CGLweb前端部落格</p>    <p>青格勒前端部落格</p>    <p>CGLweb前端部落格</p>    <p>青格勒前端部落格</p>    <p>CGLweb前端部落格</p>    <p>青格勒前端部落格</p>    <p>CGLweb前端部落格</p>    <p>青格勒前端部落格</p>    <p>CGLweb前端部落格</p>    <p>青格勒前端部落格</p>    <p>CGLweb前端部落格</p>    <p>青格勒前端部落格</p>    <p>CGLweb前端部落格</p>    <p>青格勒前端部落格</p>    <p>CGLweb前端部落格</p>    <p>青格勒前端部落格</p>    <p>CGLweb前端部落格</p>    <p>青格勒前端部落格</p></div>

 

三、寫你的js程式碼

<script type="text/javascript">
    $(function() {
        $("#divs").niceScroll({cursorcolor:"#f80516"});
    });</script>

 

四、然後你就可以看到一個美化過的捲軸了

 

 

 

當然這個外掛還有很多的用法和api的。

用法可以在官網檢視，下面我就用我18級英語給你們簡單的翻譯一下吧：

一、用法

1、簡單模式

$(function() {
    $("body").niceScroll();
});

 

2、返回物件

var nice = false;
$(function() {
    nice = $("body").niceScroll();
});

 

3、設定引數

$(function() {
   $("#divs").niceScroll({       cursorcolor:"#f80516",       cursorwidth:'10px'
   });
});

 

4、定義被巢狀的容器

$(function() {
    $("#divs").niceScroll("#divs2",{cursorcolor:"#00F"});
});

 

5、獲取滾動的物件

var nice = $("#mydiv").getNiceScroll();

console.log一下就知道了

 

6、隱藏捲軸

用這個之前必須設定滾動的引數，下面的程式碼知識隱藏了捲軸而已。

$("#divs").getNiceScroll().hide();

 

7、檢查捲軸調整大小（內容或位置發生變化時）

$("#mydiv").getNiceScroll().resize();

我試驗了一下，這個需要放在你的觸發器裡面，每次觸發內容的時候執行一次就可以，他是不會自己執行的。

 

8、捲軸位置設定

$("#divs").getNiceScroll(0).doScrollLeft(x, duration); //X$("#divs").getNiceScroll(0).doScrollTop(y, duration); //Y

 

下面就介紹一下API吧：

$("#divs").niceScroll({    cursorcolor: "#424242", //游標顏色的十六進位制
    cursoropacitymin: 0, //當游標處於非活動狀態時更改不透明度，範圍從1到0
    cursoropacitymax: 1, //當游標處於活動狀態時改變不透明度（scrollabar“可見”狀態），範圍從1到0
    cursorwidth: "5px", //捲軸寬度
    cursorborder: "1px solid #fff", //捲軸邊框的css定義
    cursorborderradius: "5px", //捲軸的border-radius
    zindex: "auto" | [number], //捲軸div的z-index
    scrollspeed: 60, //滾動速度
    mousescrollstep: 40, //用滑鼠滾輪滾動速度（畫素）
    emulatetouch: false, //啟用游標拖動滾動，就像桌面計算機中的觸控裝置一樣
    hwacceleration: true, //支援時使用硬體加速滾動
    boxzoom: false, //為框內容啟用縮放
    dblclickzoom: true, //（僅當boxzoom = true時）雙擊框時啟用縮放
    gesturezoom: true, //（僅當boxzoom = true且帶有觸控裝置時）放大/放入框時啟用縮放
    grabcursorenabled: true, //（僅當touchbehavior = true時）顯示“抓取”圖示
    autohidemode: true, //true沒有滾動時隱藏、"cursor"只隱藏游標、false不要隱藏、"leave"僅在指標離開內容時隱藏、"hidden"總是隱藏、"scroll"僅在滾動時顯示
    background: "#000", //捲軸背景軌道背景色
    iframeautoresize: true, //在載入事件上自動調整iframe
    cursorminheight: 32, //設定最小捲軸高度
    preservenativescrolling: true, //您可以使用滑鼠，冒泡滑鼠滾輪事件滾動本機可滾動區域
    railoffset: false, //您可以為軌道位置新增偏移頂部/左側
    bouncescroll: false, //（僅限hw accell）啟用內容末尾的滾動彈跳，類似於移動裝置
    spacebarenabled: true, //按空格鍵時 啟用向下滾動頁面
    railpadding: { top: 0, right: 0, left: 0, bottom: 0 }, //為軌道填充
    disableoutline: true, //對於chrome瀏覽器，在使用nicescroll選擇div時禁用大綱（橙色突出顯示）
    horizrailenabled: true, //水平滾動
    railalign: right, //垂直軌道的對齊
    railvalign: bottom, //水平軌道的對齊
    enabletranslate3d: true, //使用css translate來滾動內容
    enablemousewheel: true, //滑鼠滾輪事件
    enablekeyboard: true, //鍵盤事件
    smoothscroll: true, //輕鬆移動滾動
    sensitiverail: true, //點選軌道滾動
    enablemouselockapi: true, //可以使用滑鼠標題鎖API（物件拖動時出現同樣的問題）
    cursorfixedheight: false, //畫素中的游標設定固定高度
    hidecursordelay: 400, //設定延遲（以微秒為單位）淡出捲軸
    directionlockdeadzone: 6, //用於方向鎖定啟用的死區（以畫素為單位）
    nativeparentscrolling: true, //檢測內容的底部並讓父卷軸滾動，就像本機滾動一樣
    enablescrollonselection: true, //在選擇文字時啟用內容的自動滾動
    cursordragspeed: 0.3, //用游標拖動時的選擇速度
    rtlmode: "auto", //水平div滾動從左側開始
    cursordragontouch: false, //也可以在touch / touchbehavior模式下拖動游標
    oneaxismousemode: "auto", //允許水平滾動滑鼠滾輪僅限水平內容，如果為false（僅垂直）滑鼠滾輪不水平滾動，如果值為自動檢測雙軸滑鼠
    scriptpath: "" //為boxmode圖示定義自定義路徑
    preventmultitouchscrolling: true, //阻止在多點觸控事件上滾動
    disablemutationobserver: false, //強制MutationObserver被禁用
    enableobserver: true, //啟用DOM更改觀察者，它嘗試在父或內容div更改時調整大小/隱藏/顯示
    scrollbarid: false //為nicescroll欄設定自定義ID 
});