niceScroll滾動(dòng)條使用
有時(shí)候我們可能覺得系統(tǒng)默認(rèn)的滾動(dòng)條太丑，想要改變它，雖然可以通過css來改變，但是火狐直接不支持css改變滾動(dòng)條，所以我們用js來解決

niceScroll官網(wǎng)：https://nicescroll.areaaperta.com/
jQuery官網(wǎng)：https://jquery.com/

niceScroll插件基于jQuery，所以先引入jQuery

基本配置

$("[user-basic-message]").niceScroll({touchbehavior: false,cursorcolor: "#000",cursoropacitymax: 1,cursorwidth: 5,cursorborder: "none",cursorborderradius: "4px",background: "",autohidemode: false});

效果圖

niceScroll參數(shù)

cursorcolor - 十六進(jìn)制改變光標(biāo)顏色，默認(rèn)值是“＃000000”
cursoropacitymin - 改變不透明度非常光標(biāo)處于非活動(dòng)狀態(tài)（scrollabar“隱藏”狀態(tài)），范圍從1到0，
默認(rèn)為0（隱藏）
cursoropacitymax - 改變不透明度非常光標(biāo)處于活動(dòng)狀態(tài)（scrollabar“可見”狀態(tài)），范圍從1到0，默
認(rèn)值是1（完全不透明）
cursorwidth - 像素光標(biāo)的寬度，默認(rèn)值為5（你可以寫“加入5px”太）
cursorborder - 游標(biāo)邊框css定義，默認(rèn)為“1px的固體＃FFF”
cursorborderradius - 以像素為光標(biāo)邊界半徑，默認(rèn)為“遞四方”
zIndex的 - 改變z-index值的滾動(dòng)條的div，默認(rèn)值是9999
scrollspeed - 滾動(dòng)速度，默認(rèn)值為60
mousescrollstep - 高速滾動(dòng)鼠標(biāo)滾輪，默認(rèn)值是40（像素）
touchbehavior - 使光標(biāo)拖動(dòng)滾動(dòng)像在臺(tái)式電腦觸摸設(shè)備（默認(rèn)：false）
hwacceleration - 使用硬件加速滾動(dòng)支持的時(shí)候（默認(rèn)：true）
boxzoom - 使變焦框中的內(nèi)容（默認(rèn)：false）
dblclickzoom - （僅當(dāng)boxzoom = TRUE）變焦激活時(shí)，雙擊對話框（默認(rèn)：true）
gesturezoom - （僅當(dāng)boxzoom =真實(shí)，使用觸摸設(shè)備）上縮放框激活時(shí)，間距輸出/輸入（默認(rèn)：true）
grabcursorenabled，顯示“搶”圖標(biāo)的div touchbehavior = true時(shí)，（默認(rèn)：true）
autohidemode，如何隱藏滾動(dòng)條的作品，真=默認(rèn)/“光標(biāo)”=只進(jìn)游標(biāo)隱藏/ false =不隱藏背景，CSS改變軌道的背景下，默認(rèn)為“”
iframeautoresize，在加載事件AUTORESIZE的iframe（默認(rèn)：true）
cursorminheight，設(shè)置在像素的最小光標(biāo)高度（默認(rèn)值：20）
preservenativescrolling，您可以滾動(dòng)本機(jī)可滾動(dòng)區(qū)域用鼠標(biāo)，冒泡鼠標(biāo)滾輪事件（默認(rèn)：true）
railoffset，您可以添加抵消頂部/左邊的軌道位置（默認(rèn)：false）
bouncescroll，使?jié)L動(dòng)彈跳在內(nèi)容結(jié)尾作為移動(dòng)像（僅HW ACCELL）（默認(rèn)：false）
spacebarenabled，使向下翻頁時(shí)，空格鍵已經(jīng)按下滾動(dòng)（默認(rèn)：true）
railpadding，設(shè)置填充為鐵路吧（默認(rèn)值：{頂：0，右：0，左：0，下：0}）
disableoutline，對于chrome瀏覽器，停用大綱（橙色hightlight）選擇具有nicescroll一個(gè)div（默認(rèn)：
true）時(shí)，
horizrailenabled，nicescroll可以管理水平滾動(dòng)（默認(rèn)：true）
railalign，取向垂直導(dǎo)軌（defaul：“右”）
railvalign，對齊水平導(dǎo)軌（defaul：“底部”）
enabletranslate3d，nicescroll可以使用CSS轉(zhuǎn)換為滾動(dòng)內(nèi)容（默認(rèn)：true）
enablemousewheel，nicescroll可以管理的鼠標(biāo)滾輪事件（默認(rèn)：true）
enablekeyboard，nicescroll可以管理鍵盤事件（默認(rèn)：true）
smoothscroll，滾動(dòng)自如移動(dòng)（默認(rèn)：true）
sensitiverail，點(diǎn)擊軌道上進(jìn)行滾動(dòng)（默認(rèn)：true）
enablemouselockapi，可以用鼠標(biāo)說明鎖的API（對象拖動(dòng)同樣的問題）（默認(rèn)：true）
cursorfixedheight，用于光標(biāo)在像素設(shè)置固定的高度（默認(rèn)：false）
hidecursordelay，設(shè)置在微秒淡出滾動(dòng)條的延遲時(shí)間（默認(rèn)值：400）
directionlockdeadzone，在對方向鎖定激活像素死區(qū)（默認(rèn)值：6）
nativeparentscrolling，檢測內(nèi)容底部，并讓家長來滾動(dòng)，作為原生滾動(dòng)做（默認(rèn)：true）
enablescrollonselection，啟用自動(dòng)滾動(dòng)的內(nèi)容時(shí)，選擇文本（默認(rèn)：true）

（參數(shù)來自：https://www.cnblogs.com/cssfirefly/p/3446140.html）

總結(jié)

以上是生活随笔為你收集整理的niceScroll滚动条使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。