运用了许多的转动条插件,如Iscroll,swiper,此次说说Nicescroll
1,支撑程度转动条!
2,支撑div,IFrames,文本区和文档页面转动条。
3,兼容一切的桌面阅读器:Firefox 4 +,Chrome 5 +,Safari 4 +(win/ mac),Opera 10 +,IE 6+。
4,兼容挪动装备:iPad / iPhone / iPod,Android 2.2 +,黑莓手机和playbook(WebWorks/Table OS),Windows Phone 7.5芒果。
5,兼容一切触摸装备:iPad,Android平板电脑,窗口接口。
6,兼容多输入装备(鼠标和触摸或笔):窗面,桌面Chrome,触屏笔记本;
7,兼容两端鼠:苹果把戏鼠标,苹果双轮鼠标,电脑双轮鼠标(假如阅读器支撑)。
8,简朴的装置和激活,不损坏代码。
9,异常时髦的转动条,没有占据你的窗口
10,你能够定义文档转动条的作风! !(不是一切的剧本完成此功用)
11,在一切阅读器上你能够转动:拖动鼠标,鼠标滚轮(速率可定制),键盘导航(cursor,pagup/down,home/end )
12,转动润滑(如当代平板电脑阅读),速率是可定制的
13,缩放功用
14,硬件加速转动(可用)
15,动画帧支撑smoth转动和cpu-saving
16,拖动转动形式与转动动力(如触摸装备)
17,一切重要阅读器桌面和挪动版本经由过程测试
18,支撑触摸装备
19,支撑多输入装备(与MSPointer IE10阅读器)
20,兼容其他阅读器,包括IE6,Safari在Mac和WP7芒果!
21,可定制转动条方向
22,转动事宜
23,与jQuery代码完整集成
24,兼容jQuery UI, jQuery Touch, jQuery Mobile
引入中心文件,插件须要引入1.5.X以上版本的jquery库
<script src="http://libs.useso.com/js/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.nicescroll.js"></script>
简朴运用,转变文档转动条的作风(运用html元素)
$(document).ready(
function() {
$("html").niceScroll();
}
);
返回对象
var nice = false;
$(document).ready(
function() {
nice = $("html").niceScroll();
}
);
转变DIV光标色彩
$(document).ready(
function() {
$("#thisdiv").niceScroll({cursorcolor:"#00F"});
}
);
运用容器“wrapper”包括DIV,由两个DIV构成,前一个为vieport,后一个为内容
$(document).ready(
function() {
$("#viewportdiv").niceScroll("#wrapperdiv",{cursorcolor:"#00F"});
}
);
猎取转动对象
var nice = $("#mydiv").getNiceScroll();
隐蔽转动条
$("#mydiv").getNiceScroll().hide();
检测转动条是不是重置大小(当窗口转变大小时)
$("#mydiv").getNiceScroll().resize();
转动到某个位置
$("#mydiv").getNiceScroll(0).doScrollLeft(x, duration); // Scroll X Axis
$("#mydiv").getNiceScroll(0).doScrollTop(y, duration); // Scroll Y Axis
设置参数
$("#thisdiv").niceScroll({
cursorcolor: "#424242", // 转变转动条色彩,运用16进制色彩值
cursoropacitymin: 0, // 当转动条是隐蔽状况时转变透明度, 值局限 1 到 0
cursoropacitymax: 1, // 当转动条是显现状况时转变透明度, 值局限 1 到 0
cursorwidth: "5px", // 转动条的宽度,单元:像素
cursorborder: "1px solid #fff", // CSS体式格局定义转动条边框
cursorborderradius: "5px", // 转动条圆角(像素)
zindex: "auto" | <number>, // 转变转动条的DIV的z-index值
scrollspeed: 60, // 转动速率
mousescrollstep: 40, // 鼠标滚轮的转动速率 (像素)
touchbehavior: false, // 激活拖拽转动
hwacceleration: true, // 激活硬件加速
boxzoom: false, // 激活放大box的内容
dblclickzoom: true, // (仅当 boxzoom=true时有用)双击box时放大
gesturezoom: true, // (仅 boxzoom=true 和触屏装备时有用) 激活变焦当out/in(两个手指外张或压缩)
grabcursorenabled: true // (仅当 touchbehavior=true) 显现“捉住”图标display "grab" icon
autohidemode: true, // 隐蔽转动条的体式格局, 可用的值:
true | // 无转动时隐蔽
"cursor" | // 隐蔽
false | // 不隐蔽,
"leave" | // 仅在指针脱离内容时隐蔽
"hidden" | // 一向隐蔽
"scroll", // 仅在转动时显现
background: "", // 轨道的背景色彩
iframeautoresize: true, // 在加载事宜时自动重置iframe大小
cursorminheight: 32, // 设置转动条的最小高度 (像素)
preservenativescrolling: true, // 你能够用鼠标转动可转动地区的转动条和增添鼠标滚轮事宜
railoffset: false, // 能够运用top/left来修改位置
bouncescroll: false, // (only hw accell) 启用转动腾跃的内容挪动
spacebarenabled: true, // 当按下空格时使页面向下转动
railpadding: { top: 0, right: 0, left: 0, bottom: 0 }, // 设置轨道的内间距
disableoutline: true, // 中选中一个运用nicescroll的div时,chrome阅读器中禁用outline
horizrailenabled: true, // nicescroll能够治理程度转动
railalign: right, // 对齐垂直轨道
railvalign: bottom, // 对齐程度轨道
enabletranslate3d: true, // nicescroll 能够运用CSS变型来转动内容
enablemousewheel: true, // nicescroll能够治理鼠标滚轮事宜
enablekeyboard: true, // nicescroll能够治理键盘事宜
smoothscroll: true, // ease动画转动
sensitiverail: true, // 单击轨道发生转动
enablemouselockapi: true, // 能够用鼠标锁定API题目 (相似对象拖动)
cursorfixedheight: false, // 修改光标的高度(像素)
hidecursordelay: 400, // 设置转动条淡出的延迟时间(毫秒)
directionlockdeadzone: 6, // 设定死区,为激活方向锁定(像素)
nativeparentscrolling: true, // 检测内容底部便于让父级转动
enablescrollonselection: true, // 中挑选文本时激活内容自动转动
cursordragspeed: 0.3, // 设置拖拽的速率
rtlmode: "auto", // DIV的程度转动从左侧最先
cursordragontouch: false, // 运用触屏形式来完成拖拽
oneaxismousemode: "auto", // 当只要程度转动时能够用鼠标滚轮来转动,假如设为false则不支撑程度转动,假如设为auto支撑双轴转动
scriptpath: "" // 为boxmode图片自定义途径 ("" => same script path)
preventmultitouchscrolling: true // 防备多触点事宜激发转动
});
More
Configuration parameters
When you call "niceScroll" you can pass some parameters to custom visual aspects:
cursorcolor - change cursor color in hex, default is "#000000"
cursoropacitymin - change opacity very cursor is inactive (scrollabar "hidden" state), range from 1 to 0, default is 0 (hidden)
cursoropacitymax - change opacity very cursor is active (scrollabar "visible" state), range from 1 to 0, default is 1 (full opacity)
cursorwidth - cursor width in pixel, default is 5 (you can write "5px" too)
cursorborder - css definition for cursor border, default is "1px solid #fff"
cursorborderradius - border radius in pixel for cursor, default is "4px"
zindex - change z-index for scrollbar div, default value is 9999
scrollspeed - scrolling speed, default value is 60
mousescrollstep - scrolling speed with mouse wheel, default value is 40 (pixel)
touchbehavior - enable cursor-drag scrolling like touch devices in desktop computer (default:false)
hwacceleration - use hardware accelerated scroll when supported (default:true)
boxzoom - enable zoom for box content (default:false)
dblclickzoom - (only when boxzoom=true) zoom activated when double click on box (default:true)
gesturezoom - (only when boxzoom=true and with touch devices) zoom activated when pitch out/in on box (default:true)
grabcursorenabled, display "grab" icon for div with touchbehavior = true, (default:true)
autohidemode, how hide the scrollbar works, true=default / "cursor" = only cursor hidden / false = do not hide
background, change css for rail background, default is ""
iframeautoresize, autoresize iframe on load event (default:true)
cursorminheight, set the minimum cursor height in pixel (default:20)
preservenativescrolling, you can scroll native scrollable areas with mouse, bubbling mouse wheel event (default:true)
railoffset, you can add offset top/left for rail position (default:false)
bouncescroll, enable scroll bouncing at the end of content as mobile-like (only hw accell) (default:false)
spacebarenabled, enable page down scrolling when space bar has pressed (default:true)
railpadding, set padding for rail bar (default:{top:0,right:0,left:0,bottom:0})
disableoutline, for chrome browser, disable outline (orange hightlight) when selecting a div with nicescroll (default:true)
horizrailenabled, nicescroll can manage horizontal scroll (default:true)
railalign, alignment of vertical rail (defaul:"right")
railvalign, alignment of horizontal rail (defaul:"bottom")
enabletranslate3d, nicescroll can use css translate to scroll content (default:true)
enablemousewheel, nicescroll can manage mouse wheel events (default:true)
enablekeyboard, nicescroll can manage keyboard events (default:true)
smoothscroll, scroll with ease movement (default:true)
sensitiverail, click on rail make a scroll (default:true)
enablemouselockapi, can use mouse caption lock API (same issue on object dragging) (default:true)
cursorfixedheight, set fixed height for cursor in pixel (default:false)
hidecursordelay, set the delay in microseconds to fading out scrollbars (default:400)
directionlockdeadzone, dead zone in pixels for direction lock activation (default:6)
nativeparentscrolling , detect bottom of content and let parent to scroll, as native scroll does (default:true)
enablescrollonselection, enable auto-scrolling of content when selection text (default:true)
官网及示例:官网 示例 下载
备注:github的代码可能在手机端没法运用,发起到示例代码内里本身提取,或许:niceScroll3.6稳定版