今天給大家介紹一個(gè)滾動(dòng)條美化插件jquery.nicescroll，這個(gè)插件有以下一個(gè)主意事項(xiàng)：
1、兼容所有最新的桌面瀏覽器和舊版：Chrome，F(xiàn)irefox，Edge，IE8 +，Safari（win / mac），Opera
2、兼容移動(dòng)設(shè)備：iPad / iPhone / iPod，Android 4 +，Blackberry手機(jī)和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)的插件
二、寫(xiě)好你的容器
三、寫(xiě)你的js代碼
四、然后你就可以看到一個(gè)美化過(guò)的滾動(dòng)條了
當(dāng)然這個(gè)插件還有很多的用法和api的。
用法可以在官網(wǎng)查看，下面我就用我18級(jí)英語(yǔ)給你們簡(jiǎn)單的翻譯一下吧：
一、用法
1、簡(jiǎn)單模式
$(function() {
$("body").niceScroll();
});
2、返回對(duì)象
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、獲取滾動(dòng)的對(duì)象
var nice = $("#mydiv").getNiceScroll();
console.log一下就知道了
6、隱藏滾動(dòng)條
用這個(gè)之前必須設(shè)置滾動(dòng)的參數(shù)，下面的代碼知識(shí)隱藏了滾動(dòng)條而已。
$("#divs").getNiceScroll().hide();
7、檢查滾動(dòng)條調(diào)整大?。▋?nèi)容或位置發(fā)生變化時(shí)）
$("#mydiv").getNiceScroll().resize();
我試驗(yàn)了一下，這個(gè)需要放在你的觸發(fā)器里面，每次觸發(fā)內(nèi)容的時(shí)候執(zhí)行一次就可以，他是不會(huì)自己執(zhí)行的。
8、滾動(dòng)條位置設(shè)置
$("#divs").getNiceScroll(0).doScrollLeft(x, duration); //X
$("#divs").getNiceScroll(0).doScrollTop(y, duration); //Y
下面就介紹一下API吧：
$("#divs").niceScroll({
cursorcolor: "#424242", //光標(biāo)顏色的十六進(jìn)制
cursoropacitymin: 0, //當(dāng)光標(biāo)處于非活動(dòng)狀態(tài)時(shí)更改不透明度，范圍從1到0
cursoropacitymax: 1, //當(dāng)光標(biāo)處于活動(dòng)狀態(tài)時(shí)改變不透明度（scrollabar“可見(jiàn)”狀態(tài)），范圍從1到0
cursorwidth: "5px", //滾動(dòng)條寬度
cursorborder: "1px solid #fff", //滾動(dòng)條邊框的css定義
cursorborderradius: "5px", //滾動(dòng)條的border-radius
zindex: "auto" | [number], //滾動(dòng)條div的z-index
scrollspeed: 60, //滾動(dòng)速度
mousescrollstep: 40, //用鼠標(biāo)滾輪滾動(dòng)速度（像素）
emulatetouch: false, //啟用光標(biāo)拖動(dòng)滾動(dòng)，就像桌面計(jì)算機(jī)中的觸摸設(shè)備一樣
hwacceleration: true, //支持時(shí)使用硬件加速滾動(dòng)
boxzoom: false, //為框內(nèi)容啟用縮放
dblclickzoom: true, //（僅當(dāng)boxzoom = true時(shí)）雙擊框時(shí)激活縮放
gesturezoom: true, //（僅當(dāng)boxzoom = true且?guī)в杏|摸設(shè)備時(shí)）放大/放入框時(shí)激活縮放
grabcursorenabled: true, //（僅當(dāng)touchbehavior = true時(shí)）顯示“抓取”圖標(biāo)
autohidemode: true, //true沒(méi)有滾動(dòng)時(shí)隱藏、"cursor"只隱藏光標(biāo)、false不要隱藏、"leave"僅在指針離開(kāi)內(nèi)容時(shí)隱藏、"hidden"總是隱藏、"scroll"僅在滾動(dòng)時(shí)顯示
background: "#000", //滾動(dòng)條背景軌道背景色
iframeautoresize: true, //在加載事件上自動(dòng)調(diào)整iframe
cursorminheight: 32, //設(shè)置最小滾動(dòng)條高度
preservenativescrolling: true, //您可以使用鼠標(biāo)，冒泡鼠標(biāo)滾輪事件滾動(dòng)本機(jī)可滾動(dòng)區(qū)域
railoffset: false, //您可以為軌道位置添加偏移頂部/左側(cè)
bouncescroll: false, //（僅限hw accell）啟用內(nèi)容末尾的滾動(dòng)彈跳，類似于移動(dòng)設(shè)備
spacebarenabled: true, //按空格鍵時(shí) 啟用向下滾動(dòng)頁(yè)面
railpadding: { top: 0, right: 0, left: 0, bottom: 0 }, //為軌道填充
disableoutline: true, //對(duì)于chrome瀏覽器，在使用nicescroll選擇div時(shí)禁用大綱（橙色突出顯示）
horizrailenabled: true, //水平滾動(dòng)
railalign: right, //垂直軌道的對(duì)齊
railvalign: bottom, //水平軌道的對(duì)齊
enabletranslate3d: true, //使用css translate來(lái)滾動(dòng)內(nèi)容
enablemousewheel: true, //鼠標(biāo)滾輪事件
enablekeyboard: true, //鍵盤(pán)事件
smoothscroll: true, //輕松移動(dòng)滾動(dòng)
sensitiverail: true, //點(diǎn)擊軌道滾動(dòng)
enablemouselockapi: true, //可以使用鼠標(biāo)標(biāo)題鎖API（對(duì)象拖動(dòng)時(shí)出現(xiàn)同樣的問(wèn)題）
cursorfixedheight: false, //像素中的光標(biāo)設(shè)置固定高度
hidecursordelay: 400, //設(shè)置延遲（以微秒為單位）淡出滾動(dòng)條
directionlockdeadzone: 6, //用于方向鎖定激活的死區(qū)（以像素為單位）
nativeparentscrolling: true, //檢測(cè)內(nèi)容的底部并讓父卷軸滾動(dòng)，就像本機(jī)滾動(dòng)一樣
enablescrollonselection: true, //在選擇文本時(shí)啟用內(nèi)容的自動(dòng)滾動(dòng)
cursordragspeed: 0.3, //用光標(biāo)拖動(dòng)時(shí)的選擇速度
rtlmode: "auto", //水平div滾動(dòng)從左側(cè)開(kāi)始
cursordragontouch: false, //也可以在touch / touchbehavior模式下拖動(dòng)光標(biāo)
oneaxismousemode: "auto", //允許水平滾動(dòng)鼠標(biāo)滾輪僅限水平內(nèi)容，如果為false（僅垂直）鼠標(biāo)滾輪不水平滾動(dòng)，如果值為自動(dòng)檢測(cè)雙軸鼠標(biāo)
scriptpath: "" //為boxmode圖標(biāo)定義自定義路徑
preventmultitouchscrolling: true, //阻止在多點(diǎn)觸控事件上滾動(dòng)
disablemutationobserver: false, //強(qiáng)制MutationObserver被禁用
enableobserver: true, //啟用DOM更改觀察者，它嘗試在父或內(nèi)容div更改時(shí)調(diào)整大小/隱藏/顯示
scrollbarid: false //為nicescroll欄設(shè)置自定義ID
});
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
重慶分公司
重慶分公司
