??nicescroll是一款基于jQuery的滾動條插件，使用簡單，功能強大，較mCustomScrollbar而言：

• 資源文件少，只要一個jquery.nicescroll.min.js即可，無須css和額外js文件
• DOM結構更簡單
• 功能沒有mCustomScrollbar強
• 事件回調沒有mCustomScrollbar直觀

??關于nicescroll使用方法，網上很多，但是關于nicescroll事件回調則很少，本文除介紹nicescroll使用方法和常用配置外，將著重介紹如何實現nicescroll事件回調，如：滾動開始、滾動結束等。參考 nicescroll github, 使用方法和參數配置如下：

使用方法：

// 1. Simple mode, it styles document scrollbar: $(function() { $("body").niceScroll(); });// 2. Instance with object returned: var nice = false; $(function() { nice = $("body").niceScroll(); });// 3. 設置滾動條顏色: $(function() { $("#thisdiv").niceScroll({cursorcolor:"#00F"}); });// 4. DIV with "wrapper", formed by two divs, the first is the vieport, the latter is the content: $(function() {$("#viewportdiv").niceScroll("#wrapperdiv",{cursorcolor:"#00F"}); });// 5. Get nicescroll object: var nice = $("#mydiv").getNiceScroll();// 6. Hide scrollbars: $("#mydiv").getNiceScroll().hide();// 7. Check for scrollbars resize (when content or position have changed): $("#mydiv").getNiceScroll().resize();// 8. Scrolling to a position: $("#mydiv").getNiceScroll(0).doScrollLeft(x, duration); // Scroll X Axis $("#mydiv").getNiceScroll(0).doScrollTop(y, duration); // Scroll Y Axis

參數配置如下：

$("#thisdiv").niceScroll({cursorcolor: "#424242", // 滾動條顏色cursoropacitymin: 0, // 滾動條透明度cursoropacitymax: 1, // 滾動條透明度, 顯示min->max, 隱藏max->mincursorwidth: "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 });

nicescroll事件回調
以滾動scrollend回調為例，有2種實現方式：
方式1:

$("#mydiv").getNiceScroll(0).scrollend(function(e) {// TODO });

方式2:

var scroll = $("#mydiv").niceScroll(); scroll.scrollend(function(e) {// TODO });

其它回調諸如：scrollstart, scrollcancel等類似.

總結

以上是生活随笔為你收集整理的jQuery 滚动条插件nicescroll 使用方法、常见配置和事件回调使用说明的全部內容，希望文章能夠幫你解決所遇到的問題。

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