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

Posted 2022-02-20 IT1995

前言

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

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 hex
    cursoropacitymin: 0, // change opacity when cursor is inactive (scrollabar "hidden" state), range from 1 to 0
    cursoropacitymax: 1, // change opacity when cursor is active (scrollabar "visible" state), range from 1 to 0
    cursorwidth: "5px", // cursor width in pixel (you can also write "5px")
    cursorborder: "1px solid #fff", // css definition for cursor border
    cursorborderradius: "5px", // border radius in pixel for cursor
    zindex: "auto" | [number], // change z-index for scrollbar div
    scrollspeed: 60, // scrolling speed
    mousescrollstep: 40, // scrolling speed with mouse wheel (pixel)
    touchbehavior: false, // DEPRECATED!! use "emulatetouch"
    emulatetouch: false, // enable cursor-drag scrolling like touch devices in desktop computer
    hwacceleration: true, // use hardware accelerated scroll when supported
    boxzoom: false, // enable zoom for box content
    dblclickzoom: true, // (only when boxzoom=true) zoom activated when double click on box
    gesturezoom: true, // (only when boxzoom=true and with touch devices) zoom activated when pinch out/in on box
    grabcursorenabled: true // (only when touchbehavior=true) display "grab" icon
    autohidemode: true, // how hide the scrollbar works, possible values: 
      true | // hide when no scrolling
      "cursor" | // only cursor hidden
      false | // do not hide,
      "leave" | // hide only if pointer leaves content
      "hidden" | // hide always
      "scroll", // show only on scroll          
    background: "", // change css for rail background
    iframeautoresize: true, // autoresize iframe on load event
    cursorminheight: 32, // set the minimum cursor height (pixel)
    preservenativescrolling: true, // you can scroll native scrollable areas with mouse, bubbling mouse wheel event
    railoffset: false, // you can add offset top/left for rail position
    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 , // set padding for rail bar
    disableoutline: true, // for chrome browser, disable outline (orange highlight) when selecting a div with nicescroll
    horizrailenabled: true, // nicescroll can manage horizontal scroll
    railalign: right, // alignment of vertical rail
    railvalign: bottom, // alignment of horizontal rail
    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, // set fixed height for cursor in pixel
    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
    cursordragspeed: 0.3, // speed of selection when dragged with cursor
    rtlmode: "auto", // horizontal div scrolling starts at left side
    cursordragontouch: false, // drag cursor in touch / touchbehavior mode also
    oneaxismousemode: "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 mouse
    scriptpath: "" // define custom path for boxmode icons ("" => same script path)
    preventmultitouchscrolling: true // prevent scrolling on multitouch events
    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 
);

此处用个表简单解释下：

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