jquery.nicescroll的使用

作者:LuckyMoke 时间:2012-12-18

nicescroll简介

jquery滚动条插件nicescroll自定义滚动条特效插件 2015-10-18日重新编辑扩充

nicescroll是一个jQuery插件,类似于IOS或者安卓移动端的滚动效果。

  1. 支持垂直和水平滚动,支持电脑,平板电脑和手机等设备。

  2. 支持div,iframe,文本,网页和文件(体)滚动条。

  3. 支持所有的桌面浏览器:Firefox 4+,5+的Chrome,Safari 4+(MAC),Opera 10+,IE 6+。

  4. 支持的移动设备iPhone / iPod / ipad,Android 2.2+,黑莓手机,Windows Phone 7.5和Windows Phone 8芒果。

  5. 所有的触摸设备兼容:ipad,桌面操作系统。

  6. 触摸鼠标兼容。

  7. 结合现代浏览器硬件加速滚动。

  8. 使用animationframe滚动。(节省CPU性能如果浏览器支持)

可以看到它几乎兼容所有的系统,所有的设备,这点是非常强大的。

简单使用

首先要引入jquery.nicescroll.js库,文件下载在文章最底部

<script src="jquery.nicescroll.js"></script>

然后在需要滚动插件的标签加上js就可以了

$(document).ready(
  function() { 
    $("html").niceScroll(); //给整个页面加上滚动效果
  }
);

很简单吧,当然你要是觉得不够,nicescroll还有丰富的参数可以自定义滚动效果。

高阶效果

设置光标颜色

$(document).ready(
  function() { 
    $("#thisdiv").niceScroll({
        cursorcolor:"#00F" //修改光标的颜色
    });
  }
);

Div包裹,由两个div组成,第一个是包裹div,第二的才是滚动div

$(document).ready(
  function() { 
    $("#viewportdiv").niceScroll("#wrapperdiv",{
        cursorcolor:"#00F"
    });
  }
);

隐藏滚动条

$("#mydiv").getNiceScroll().hide();

检查滚动条大小变化(当窗口大小变化时滚动条跟着变化)

$("#mydiv").getNiceScroll().resize();

所有参数说明

翻译有误请指正,谢谢!

$("#thisdiv").niceScroll({
    cursorcolor: "#424242", // 改变光标颜色
    cursoropacitymin: 0, // 设置非活动状态光标透明度,取值范围0-1,默认为0。
    cursoropacitymax: 1, // 设置活动状态光标透明度,取值范围0-1,默认为1。
    cursorwidth: "5px", // 设置光标宽度
    cursorborder: "1px solid #fff", // 设置光标边框
    cursorborderradius: "5px", // 设置光标圆角
    zindex: "auto" | <number>, // 设置滚动条的层数值
    scrollspeed: 60, // 滚动速度,单位秒
    mousescrollstep: 40, // 每次滚动距离
    touchbehavior: false, // 设置触摸滑动。默认值false
    hwacceleration: true, // 使用硬件加速滚动支持
    boxzoom: false, // 设置是否可以放大容器,默认值false
    dblclickzoom: true, // 双击放大/缩小容器(当boxzoom为true有效)。默认值为true
    gesturezoom: true, // 是否支持手指缩进或放大容器(当boxzoom为true并且在touch设备上)
    grabcursorenabled: true // 设置是否显示为grab(手掌)状态(当touchbehavior=true生效)
    autohidemode: true, // 怎样隐藏滚动条,可能的值有:
      true | // 当不滚动隐藏
      "cursor" | // 仅光标隐藏
      false | // 不隐藏
      "leave" | // 当光标离开容器时隐藏
      "hidden" | // 总是隐藏
      "scroll", // 仅滚动时显示
    background:"", // 设置滚动条背景颜色
    iframeautoresize:true, // 当框架载入时自动设置大小
    cursorminheight:32, // 设置光标最小大小
    preservenativescrolling:true, //设置是否可以使用鼠标滚动, 冒泡鼠标滚动事件
    railoffset:false, //添加滚动位移
    bouncescroll:false, //设置是否显示反弹(需要硬件支持) 
    spacebarenabled:true, //设置是否支持空格键滚动  
    railpadding: { top:0, right:0, left:0, bottom:0 }, //设置滚动条距离边框的距离 
    disableoutline:true, //禁用nicesroll容器选中时chrome浏览器默认产生轮廓线(黄 色高亮)  
    horizrailenabled:true, //设置nicescroll是否美化水平滚动条 
    railalign: right, //滚动条水平对齐方式
    railvalign: bottom, //滚动条垂直对齐方式 
    enabletranslate3d:true, //设置nicescroll是否可以使用CSS translate属性滚动内容
    enablemousewheel:true, //设置nicescroll是否可以管理鼠标事件 
    enablekeyboard:true, //设置nicescroll是否可以管理键盘事件
    smoothscroll:true, //平滑滚动  
    sensitiverail:true, //点击滚动条,滚动到指定位置
    enablemouselockapi:true, //可以使用鼠标扑捉API(在对象拽托存在一些问题)*这一句蒙的can use mouse caption lock API (same issue on object dragging)
    cursorfixedheight:false, //设置固定高度游标 
    hidecursordelay:400, //设置光标隐藏延迟时间
    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, //设置选择文本时是否自动滚动
    cursordragspeed:0.3, //设置选中文本时光标滚动速度 
    rtlmode:"auto", //水平滚动条从左方开始
    cursordragontouch:false, //touch设备上鼠标展现拽托状态
    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
});

文件下载

你可以直接引用又拍云加速cdn节点的jquery.nicescroll.js(3.5.4版本)文件。

//压缩混淆版
http://cdnjscn.b0.upaiyun.com/libs/nicescroll/3.5.4/jquery.nicescroll.min.js
//未压缩能看懂版
http://cdnjscn.b0.upaiyun.com/libs/nicescroll/3.5.4/jquery.nicescroll.js

也可以直接下载文件(3.6.0版本)放在自己的项目中

>>>>百度云  密码:mfwu

插件官网 http://areaaperta.com/nicescroll/index.html


Tips

GitHubLuckyMoke

Weibokeailvyou

QQ839488083

米拓交流群

模板有不完善的地方欢迎指正!

1511438794807394.jpg