滾動條美化插件jquery.nicescroll

今天給大家介紹一個滾動條美化插件jquery.nicescroll，這個插件有以下一個主意事項：

1、兼容所有最新的桌面瀏覽器和舊版：Chrome，F(xiàn)irefox，Edge，IE8 +，Safari（win / mac），Opera

2、兼容移動設(shè)備：iPad / iPhone / iPod，Android 4 +，Blackberry手機和Playbook（WebWorks / Table OS），Windows Phone 8和10

3、兼容所有觸摸設(shè)備：iPad，Android平板電腦，Window ace

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

5、下載地址：www.npmjs.com/package/jquery.nicescroll

6、代碼需要放在

$(function() {});
里面。

一、引入相應(yīng)的插件

<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></p>
<p></p>
</div>

三、寫你的js代碼

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

四、然后你就可以看到一個美化過的滾動條了

當然這個插件還有很多的用法和api的。

用法可以在官網(wǎng)查看，下面我就用我18級英語給你們簡單的翻譯一下吧：

一、用法

1、簡單模式

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

2、返回對象

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

3、設(shè)置參數(shù)

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

4、定義被嵌套的容器

$(function() {
$("#divs").niceScroll("#divs2",{cursorcolor:"#00F"});（www.gendan5.com）
});

5、獲取滾動的對象

var nice = $("#mydiv").getNiceScroll();
console.log一下就知道了

6、隱藏滾動條

用這個之前必須設(shè)置滾動的參數(shù)，下面的代碼知識隱藏了滾動條而已。

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

7、檢查滾動條調(diào)整大小（內(nèi)容或位置發(fā)生變化時）

$("#mydiv").getNiceScroll().resize();
我試驗了一下，這個需要放在你的觸發(fā)器里面，每次觸發(fā)內(nèi)容的時候執(zhí)行一次就可以，他是不會自己執(zhí)行的。

8、滾動條位置設(shè)置

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

下面就介紹一下API吧：

$("#divs").niceScroll({
cursorcolor: "#424242", //光標顏色的十六進制
cursoropacitymin: 0, //當光標處于非活動狀態(tài)時更改不透明度，范圍從1到0
cursoropacitymax: 1, //當光標處于活動狀態(tài)時改變不透明度（scrollabar“可見”狀態(tài)），范圍從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, //啟用光標拖動滾動，就像桌面計算機中的觸摸設(shè)備一樣
hwacceleration: true, //支持時使用硬件加速滾動
boxzoom: false, //為框內(nèi)容啟用縮放
dblclickzoom: true, //（僅當boxzoom = true時）雙擊框時激活縮放
gesturezoom: true, //（僅當boxzoom = true且?guī)в杏|摸設(shè)備時）放大/放入框時激活縮放
grabcursorenabled: true, //（僅當touchbehavior = true時）顯示“抓取”圖標
autohidemode: true, //true沒有滾動時隱藏、"cursor"只隱藏光標、false不要隱藏、"leave"僅在指針離開內(nèi)容時隱藏、"hidden"總是隱藏、"scroll"僅在滾動時顯示
background: "#000", //滾動條背景軌道背景色
iframeautoresize: true, //在加載事件上自動調(diào)整iframe
cursorminheight: 32, //設(shè)置最小滾動條高度
preservenativescrolling: true, //您可以使用鼠標，冒泡鼠標滾輪事件滾動本機可滾動區(qū)域
railoffset: false, //您可以為軌道位置添加偏移頂部/左側(cè)
bouncescroll: false, //（僅限hw accell）啟用內(nèi)容末尾的滾動彈跳，類似于移動設(shè)備
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來滾動內(nèi)容
enablemousewheel: true, //鼠標滾輪事件
enablekeyboard: true, //鍵盤事件
smoothscroll: true, //輕松移動滾動
sensitiverail: true, //點擊軌道滾動
enablemouselockapi: true, //可以使用鼠標標題鎖API（對象拖動時出現(xiàn)同樣的問題）
cursorfixedheight: false, //像素中的光標設(shè)置固定高度
hidecursordelay: 400, //設(shè)置延遲（以微秒為單位）淡出滾動條
directionlockdeadzone: 6, //用于方向鎖定激活的死區(qū)（以像素為單位）
nativeparentscrolling: true, //檢測內(nèi)容的底部并讓父卷軸滾動，就像本機滾動一樣
enablescrollonselection: true, //在選擇文本時啟用內(nèi)容的自動滾動
cursordragspeed: 0.3, //用光標拖動時的選擇速度
rtlmode: "auto", //水平div滾動從左側(cè)開始
cursordragontouch: false, //也可以在touch / touchbehavior模式下拖動光標
oneaxismousemode: "auto", //允許水平滾動鼠標滾輪僅限水平內(nèi)容，如果為false（僅垂直）鼠標滾輪不水平滾動，如果值為自動檢測雙軸鼠標
scriptpath: "" //為boxmode圖標定義自定義路徑
preventmultitouchscrolling: true, //阻止在多點觸控事件上滾動
disablemutationobserver: false, //強制MutationObserver被禁用
enableobserver: true, //啟用DOM更改觀察者，它嘗試在父或內(nèi)容div更改時調(diào)整大小/隱藏/顯示
scrollbarid: false //為nicescroll欄設(shè)置自定義ID
});