jQuery 滚动条插件nicescroll 使用方法、常见配置和事件回调使用说明

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 scrollbackground: "", // 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-likespacebarenabled: 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 使用方法、常见配置和事件回调使用说明相关推荐

15个带示例的jQuery滚动条插件
1.NiceScroll:可用于桌面.移动与触摸设备的jQuery滚动插件 NiceScroll是一个jQuery插件(since 1.5),它有着类似于ios/移动设备的样式.它支持Div.iFra ...
【easyUI】easyUI Confirm使用方法及配置文字以及回调以及【更改源码】扩展功能修改按钮文字；
[easyUI]easyUI Confirm使用方法及配置文字以及回调以及[更改源码]扩展功能修改按钮文字: 基本使用 $.messager.confirm(title,msg,fn) param: ...
jquery滚动条插件slimScroll
jQuery slimScroll插件是一个支持把内容放在一个盒子里面,固定一个高度,超出的则使用滚动.该插件挺好的. 不过不支持resize的时候重新调用插件,有一个贡献者已经修改过源码,不过作者并 ...
jquery滚动条插件slimScroll的使用方法总结
simScroll插件项目下载地址:https://github.com/rochal/jQuery-slimScroll TIP: 1.slimScroll在使用的时候要依赖JQ,所以首次使用的时候 ...
滚动条插件nicescroll的使用
https://www.hangge.com/blog/cache/detail_1931.html 使用: 需要引入jQuery插件和 jquery.nicescroll.js插件修改滚动条: $ ...
jQuery日历插件FullCalendar使用方法
转载至此 html代码片段 <head> <meta charset='utf-8' /> <link href='../fullcalendar.css' rel='s ...
滚动条插件 nicescroll 的使用
最近写项目需要美化页面的滚动条,于是接触了nicescroll这个滚动条美化插件.具体用法如下图代码所示: /*美化滚动条*/ function scroll(id){$(id).niceScroll ...
jq slimScroll 滚动条插件回到顶部方法
找了一圈居然没人写这个回到顶部的方法,只好自己写了.. 直接贴代码 //滚动条设置 $(".myDiv").slimScroll({width: 'auto',height: '1 ...
php jq截图插件,jQuery jcrop插件截图使用方法_jquery
在后台来进行图片切割. 头像截取的原理:在前台使用jcrop获取切面的x轴坐标.y轴坐标.切面高度.切面宽度,然后将这四个值传给后台.在后台要进行放大处理:将切面放大N倍,N=原图/前台展示的头像. ...
jquery 滚动条插件
为什么80%的码农都做不了架构师?>>> http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/co ...

jQuery 滚动条插件nicescroll 使用方法、常见配置和事件回调使用说明

jQuery 滚动条插件nicescroll 使用方法、常见配置和事件回调使用说明相关推荐

最新文章

热门文章