jquery插件Nicescroll 3(异常相似IOS原生的滚动条) (转)

运用了许多的转动条插件,如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稳定版

    原文作者:zone
    原文地址: https://segmentfault.com/a/1190000006046146
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞