jquery滚动条插件 nicescroll 的 详细 配置参数
JQuery.NiceScroll
这个工具可以让你的可滚动div有一个统一的样式,无论是在PC还是在移动端等所有的平台上。
在现代浏览器上实施了硬件加速滚动。如果浏览器支持的话,它会使用animationFrame来平滑滚动。
这个代码使用了严谨模式“use strict”测试过了的,而且支持Bower和AMD模式。
本文翻译自官方原版的说明文档https://github.com/inuyaksa/jquery.nicescroll
特点:
很容易的安装和使用,几乎不用修改你现在的代码就可以运作了。(如果在某些特殊情况下发生了异常,请写信给NiceScroll插件的作者)。simple installation and activation, it works with NO modification of your code. (some exceptions can happen, so you can write to me)
非常时髦的滚动条,它不会在你的页面上占用空间(不过原始的浏览器会需要一些页面的空间,这会占用一些window或者div的可用宽度)。
你也可以在body节点上使用它。you can style main document scrollbar (body) too!!
在所有的浏览器上,你可以通过下面这些方式来滚动:拖动光标,鼠标轮滚(滚轮的速度可以自定义),键盘导航。on all browsers you can scroll: dragging the cursor, mouse wheel (speed customizable), keyboard navigation (cursor keys, pagup/down keys, home/end keys)
滚动式平湖的,而且速度是可自定义的。scroll is smooth (as modern tablet browsing), speed is customizable
支持缩放。zoom feature
如果设备能够支持,就会使用硬件加速。hardware accelerated scroll (where available)
使用了animation frame去平滑滚动并且节省cpu开销。 support for smoth scrolling and cpu-saving
触摸设备的拖动滚动模式下使用了滚动惯性。dragging scroll mode with scrolling momentum (as touch device)
在所有主流的PC浏览器和各个版本的移动端浏览器上测试通过了的。tested for all major browsers desktop and mobile versions
支持触摸设备support for touch devices
支持多点触控设备(在IE10上用了MSPointer)。support for multi-input devices (IE10 with MSPointer)
兼容许多非主流的浏览器, 包括IE6, Safari on Mac 和 WP7 !(6不6!!)
高可定制的滚动条样式
浏览器原生的滚动条也可以工作
充分的利用了jQuery
兼容 jQuery UI, jQuery Touch, jQuery Mobile
依赖:
这是一个jquery的插件,使用的时候需要引入jquery库,你可以使用1.5.x以上版本的jquery。 It's a plugin for the jquery framework, you need to include jquery in your scripts. From 1.5.x version and on. (I'd better to use 1.8.3+ minimum)
使用方法:
// 1. Simple mode, it styles document scrollbar: // 最简单的方式,给整个文档设置滚动条 $(document).ready(function() { $("html").niceScroll(); }); // 2. Instance with object returned: //返回对象实例 var nice = false; $(document).ready(function() { nice = $("html").niceScroll(); }); // 3. Style a DIV and change cursor color: //装饰一个div,并且修改光标的颜色 $(document).ready(function() { $("#thisdiv").niceScroll({cursorcolor:"#00F"}); }); // 4. DIV with "wrapper", formed by two divs, // the first is the vieport, the latter is the content: //div带有包裹层时,设置两个div,通过第一个获取参数,第二个则是内容 $(document).ready(function() { $("#viewportdiv").niceScroll("#wrapperdiv",{cursorcolor:"#00F"}); }); // 5. Get nicescroll object: //获取nicescroll实例对象 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
配置参数:
当你在调用“niceScroll”的时候,你可以通过配置这些参数去自定义不同的视觉效果。When you call "niceScroll" you can pass some parameters to custom visual aspects:
$("#thisdiv").niceScroll({ cursorcolor: "#424242", // 滚动条光标的颜色 change cursor color in hex cursoropacitymin: 0, // 滚动条在不激活状态下的透明度,默认是0 change opacity when cursor is inactive (scrollabar "hidden" state), range from 1 to 0 cursoropacitymax: 1, //滚动条在激活状态下的透明度,默认是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定义滚动条的边框 css definition for cursor border cursorborderradius: "5px", //滚动条的圆角半径 border radius in pixel for cursor zindex: "auto" | <number>, //改变滚动条div的z-index的值 change z-index for scrollbar div scrollspeed: 60, // 滚动速度 mousescrollstep: 40, //使用鼠标轮滚的时候的滚动速度 scrolling speed with mouse wheel (pixel) touchbehavior: 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, //双击放大,在boxzoom=true的情况下 (only when boxzoom=true) zoom activated when double click on box gesturezoom: true, //手势放大缩小,在boxzoom=true的情况下 (only when boxzoom=true and with touch devices) zoom activated when pinch out/in on box grabcursorenabled: true //这个可以禁用"grab"鼠标光标 (only when touchbehavior=true) display "grab" icon autohidemode: true, //设置在什么情况下隐藏scrollbar。 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, //在iframe的load事件中自动设置大小 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, //在chrome浏览器上选择一个div使用nicescroll时禁用outline, 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是否使用css translate去滚动内容 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", //设置水平滚动div的起始边是左还是右 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: "" //设置box模式下图标的路径,设成""表示和script是同一个路径 define custom path for boxmode icons ("" => same script path) preventmultitouchscrolling: true //防止在多点触摸情况下滚动 prevent scrolling on multitouch events disablemutationobserver: false //稳定滚动条 force MutationObserver disabled });