前言

官方已经给出很好的文档了。在此本人总结下，方便以后查阅：

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)基本使用相关推荐

Qt文档阅读笔记-共享库的创建与调用
使用共享库的符号这个符号可以作用在变量.类.函数中,并且这些都可以被调用端使用. 在编译共享库中,需要使用export符号.在使用端调用的时候使用import符号. 这里是本人从文档中记录的笔记,大 ...
Qt文档阅读笔记-加载HeightMap(高度图)构造3D地形图
Qt文档阅读笔记-加载HeightMap(高度图)构造3D地形图 QHeightMapSurfaceDataProxy:是Q3DSurface的一个基本代理类. 他是专门加载高度图. 高度图是没有X, ...
Qt文档阅读笔记-Rotations Example相关
Rotations Example文档阅读笔记使用这种方式,对y轴和z轴进行旋转. QQuaternion yRotation = QQuaternion::fromAxisAndAngle(0.0 ...
FreeRTOS官方指导文档阅读笔记
FreeRTOS官方指导文档阅读笔记基于 161204_Mastering_the_FreeRTOS_Real_Time_Kernel-A_Hands-On_Tutorial_Guide.pdf,可 ...
Blockly学习之文档阅读笔记
文档阅读来源--谷歌官网介绍: https://developers.google.com/blockly/guides/overview 概述一个用于Web.Android.iOS的可视化代码编辑 ...
Leaflet文档阅读笔记-Quick Start Guide笔记
目录网络加载JS和CSS 初始化地图在地图上做标记在地图上点击事件获得坐标个人对这篇文档的体会网络加载JS和CSS 先要加载css,然后在加载js <link rel="st ...
Qt文档阅读笔记-QWebEngineView及QML WebEngineView
这里主要是最近有给Java Web项目及Qt项目需要混合,自己搞的QtWebEngine没有问题,而用了项目里面的,就有问题,在此阅读下官方资料,看看能不能解决这样莫名其妙的问题,在此记录下本次的阅读 ...
Qt文档阅读笔记-moc工具使用及其理论（moc工具如何添加到makefile中）
moc(Meta-Object Compiler):用于处理Qt中关于C++的扩展. moc工具读取C++头文件,看看这个头文件里面的类是不是包含Q_OBJECT宏,它会将这个头文件,转换为带有met ...
Java文档阅读笔记-EJB Tutorial
目录 Introduction to EJB What is EJB Introduction to EJB EJB(Enterprise Java Bean)Java企业组建:用于开发分布式.健全. ...

NiceScroll文档阅读笔记-NiceScroll(3.7.6)基本使用

前言

使用

NiceScroll文档阅读笔记-NiceScroll(3.7.6)基本使用相关推荐

最新文章

热门文章