前言

官方已經給出很好的文檔了。在此本人總結下，方便以后查閱：

GitHub - inuyaksa/jquery.nicescroll: nicescroll plugin for jquery - scrollbars like iphone/ipad

nicescroll是一個jquery的插件，需要先包含jquery，再使用這框架，NiceScroller可用于jQuery1.x/2.x/3.x版本，但不能在slim版本中使用。

使用

首先需要先保護jQuery，，然后再把jquery.nicesroll.min.js和zoomico.png放到項目中，注意，zoomico.png要和jquery.nicescroll.min.js放到同一個目錄下。

注意：如果不需要使用NiceScroll提供了zoom功能，就不需要加入zoomic.png圖片。

通常在document的ready的時候的初始化NiceScroll

// 1. Simple mode, it styles document scrollbar:【直接替換傳統的scroll】 $(function() { $("body").niceScroll(); });// 2. Instance with object returned:【獲取body中替換的NiceScroll對象】 var nice = false; $(function() { nice = $("body").niceScroll(); });// 3. Style a DIV and change cursor color:【改變div的style】 $(function() { $("#thisdiv").niceScroll({cursorcolor:"#00F"}); });// 4. DIV with "wrapper", formed by two divs, the first is the vieport, the latter is the content:【div嵌套時的用法，外層的叫viewport，內層的是warpper】 $(function() {$("#viewportdiv").niceScroll("#wrapperdiv",{cursorcolor:"#00F"}); });// 5. Get nicescroll object:【獲取NiceScroll對象】 var nice = $("#mydiv").getNiceScroll();// 6. Hide scrollbars:【隱藏Scrollbars】 $("#mydiv").getNiceScroll().hide();// 7. Check for scrollbars resize (when content or position have changed):【當內容和位置發生改變時，就要使用resize這個函數了】 $("#mydiv").getNiceScroll().resize();// 8. Scrolling to a position:【獲取sroll的位置，x軸和y軸】 $("#mydiv").getNiceScroll(0).doScrollLeft(x, duration); // Scroll X Axis $("#mydiv").getNiceScroll(0).doScrollTop(y, duration); // Scroll Y Axis

NiceScroll相關參數

$("#thisdiv").niceScroll({cursorcolor: "#424242", // change cursor color in hexcursoropacitymin: 0, // change opacity when cursor is inactive (scrollabar "hidden" state), range from 1 to 0cursoropacitymax: 1, // change opacity when cursor is active (scrollabar "visible" state), range from 1 to 0cursorwidth: "5px", // cursor width in pixel (you can also write "5px")cursorborder: "1px solid #fff", // css definition for cursor bordercursorborderradius: "5px", // border radius in pixel for cursorzindex: "auto" | [number], // change z-index for scrollbar divscrollspeed: 60, // scrolling speedmousescrollstep: 40, // scrolling speed with mouse wheel (pixel)touchbehavior: false, // DEPRECATED!! use "emulatetouch"emulatetouch: false, // enable cursor-drag scrolling like touch devices in desktop computerhwacceleration: true, // use hardware accelerated scroll when supportedboxzoom: false, // enable zoom for box contentdblclickzoom: true, // (only when boxzoom=true) zoom activated when double click on boxgesturezoom: true, // (only when boxzoom=true and with touch devices) zoom activated when pinch out/in on boxgrabcursorenabled: true // (only when touchbehavior=true) display "grab" iconautohidemode: true, // how hide the scrollbar works, possible values: true | // hide when no scrolling"cursor" | // only cursor hiddenfalse | // do not hide,"leave" | // hide only if pointer leaves content"hidden" | // hide always"scroll", // show only on scroll background: "", // change css for rail backgroundiframeautoresize: true, // autoresize iframe on load eventcursorminheight: 32, // set the minimum cursor height (pixel)preservenativescrolling: true, // you can scroll native scrollable areas with mouse, bubbling mouse wheel eventrailoffset: false, // you can add offset top/left for rail positionbouncescroll: false, // (only hw accell) enable scroll bouncing at the end of content as mobile-like spacebarenabled: true, // enable page down scrolling when space bar has pressedrailpadding: { top: 0, right: 0, left: 0, bottom: 0 }, // set padding for rail bardisableoutline: true, // for chrome browser, disable outline (orange highlight) when selecting a div with nicescrollhorizrailenabled: true, // nicescroll can manage horizontal scrollrailalign: right, // alignment of vertical railrailvalign: bottom, // alignment of horizontal railenabletranslate3d: true, // nicescroll can use css translate to scroll contentenablemousewheel: true, // nicescroll can manage mouse wheel eventsenablekeyboard: true, // nicescroll can manage keyboard eventssmoothscroll: true, // scroll with ease movementsensitiverail: true, // click on rail make a scrollenablemouselockapi: true, // can use mouse caption lock API (same issue on object dragging)cursorfixedheight: false, // set fixed height for cursor in pixelhidecursordelay: 400, // set the delay in microseconds to fading out scrollbarsdirectionlockdeadzone: 6, // dead zone in pixels for direction lock activationnativeparentscrolling: true, // detect bottom of content and let parent to scroll, as native scroll doesenablescrollonselection: true, // enable auto-scrolling of content when selection textcursordragspeed: 0.3, // speed of selection when dragged with cursorrtlmode: "auto", // horizontal div scrolling starts at left sidecursordragontouch: false, // drag cursor in touch / touchbehavior mode alsooneaxismousemode: "auto", // it permits horizontal scrolling with mousewheel on horizontal only content, if false (vertical-only) mousewheel don't scroll horizontally, if value is auto detects two-axis mousescriptpath: "" // define custom path for boxmode icons ("" => same script path)preventmultitouchscrolling: true // prevent scrolling on multitouch eventsdisablemutationobserver: false // force MutationObserver disabled,enableobserver: true // enable DOM changing observer, it tries to resize/hide/show when parent or content div had changedscrollbarid: false // set a custom ID for nicescroll bars });

此處用個表簡單解釋下：

property	value	description
cursorcolor	"#424242"	改變光標顏色（十六進制）
cursoropacitymin	0	當光標是無效狀態時改變其透明度，范圍從1到0
cursoropacitymax	1	當光標是有效狀態時改變其透明度，范圍從1到0
cursorwidth	"5px"	光標的寬度為5像素
cursorborder	"1px solid #fff"	使用css定義光標包邊
cursorborderradius	"5px"	光標的包邊半徑（改包邊為圓弧）
zindex	"auto" | [number]	改變光標div的z-index
scrollspeed	60	光標速率
mousescrollstep	40	用滾輪滾動的光標速率
touchbehavior	false	不要使用，改用emulatetouch
emulatetouch	false	開啟cursor-darg功能（像觸屏滾動的那個效果）
hwacceleration	true	hw是hardware，使用硬件加數功能
boxzoom	false	開啟內容放縮功能
dbclickzoom	true	當boxzoom為true時使用，當鼠標雙擊時zoom為激活狀態
gesturezoom	true	當boxzoom為true、touch devices為true時使用
grabcursorenabled	true	當touchbehavior=true時生效，展示"grab"圖標
autohidemode	true "cursor" false "leave" "hidden" "scroll"	當不滾動時，scrolllbar被隱藏； 僅光標被隱藏； 不隱藏； 僅隱藏上下箭頭； 隱藏； 只有在滾的時候顯示
background	""	使用css定義background
iframeautoresize	true	auto resize
cursorminheight	32	設置光標最小高度
preservenatviescrolling	true	使用原始的滾輪
radiloffset	false	為rail postiont添加top/left的偏移
bouncescroll	false	(only hw accell) enable scroll bouncing at the end of content as mobile-like
spacebarenabled	true	enable page down scrolling when space bar has pressed
railpadding	{top: 0, right: 0, left 0, bottom: 0}	給rail bar設置padding
disableoutline	true	for chrome browser, disable outline (orange highlight) when selecting a div with nicescroll
horizrailenabled	true	nicescroll can manage horizontal scroll
railalign	right	垂直滑軌的位置
railvalign	bottom	水平滑軌的位置
enabletranslate3d	true	nicescroll can use css translate to scroll content
enablemousewheel	true	nicescroll can manage mouse wheel events
enablekeyboard	true	nicescroll can manage keyboard events
smoothscroll	true	scroll with ease movement
sensitiverail	true	click on rail make a scroll
enablemouselockapi	true	can use mouse caption lock API (same issue on object dragging)
cursorfixedheight	false	設置光標固定高度
hidecursordelay	400	set the delay in microseconds to fading out scrollbars
directionlockdeadzone	6	dead zone in pixels for direction lock activation
nativeparentscrolling	true	detect bottom of content and let parent to scroll, as native scroll does
enablescrollonselection	true	enable auto-scrolling of content when selection text
cursordragontouch	0.3	speed of selection when dragged with cursor
oneaxismousemode	"auto"	horizontal div scrolling starts at left side
scriptpath	""	drag cursor in touch / touchbehavior mode also
preventmultitouchscrolling	true	it permits horizontal scrolling with mousewheel on horizontal only content, if false (vertical-only) mousewheel don't scroll horizontally, if value is auto detects two-axis mouse
disablemutationobserver	false	force MutationObserver disabled
enableobserver	true	enable DOM changing observer, it tries to resize/hide/show when parent or content div had changed ? ? scrollbarid: false // set a custom ID for nicescroll bars?
scrollbarid	false	set a custom ID for nicescroll bars

總結

以上是生活随笔為你收集整理的NiceScroll文档阅读笔记-NiceScroll(3.7.6)基本使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。