jQuery中Nicescroll滚动条插件的用法


Posted in Javascript onNovember 10, 2016

本篇文章主要介绍了jQuery中Nicescroll滚动条插件的用法,Nicescroll滚动条插件是一个非常强大的基于jQuery的滚动条插件,有需要的可以了解下。
Nicescroll滚动条插件是一个非常强大的基于jQuery的滚动条插件,不需要增加额外的css,几乎全浏览器兼容。ie6+,实现只需要一段代码,侵入性非常小,样式可完全自定义,支持触摸事件,可在触摸屏上使用。

Nicescroll官网地址:http://www.areaaperta.com/nicescroll/

引入核心文件,插件需要引入1.5.X以上版本的jquery库

最简单的用法如下:

$(document).ready(
 function() { 
  $("html").niceScroll();
 }
);

注意:一定要放在 $(document).ready 中进行初始化!

隐藏滚动条

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

检测滚动条是否重置大小(当窗口改变大小时)

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

滚动到某个位置

$("#mydiv").getNiceScroll(0).doScrollLeft(x, duration); // Scroll X Axis
$("#mydiv").getNiceScroll(0).doScrollTop(y, duration); // Scroll Y Axis

可增加各种参数

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

配置参数表

$("#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 // 防止多触点事件引发滚动
  });

另外注意:当在同一页面中使用多个nicescroll插件时,要及时隐藏用完的nicescroll对象,加载时,需要先show,再resize。

当插件放在具有absolute浮动的容器中,并设置了top值时,插件的top会出现问题,解决方法使用插件的railoffset属性:

railoffset, you can add offset top/left for rail position (default:false)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
淘宝搜索框效果实现分析
Mar 05 Javascript
JS代码同步文本框内容的实例方法
Jul 12 Javascript
js 获取、清空input type=&quot;file&quot;的值(示例代码)
Dec 24 Javascript
JavaScript实现数字数组按照倒序排列的方法
Apr 06 Javascript
javascript实现全角转半角的方法
Jan 23 Javascript
JavaScript实现图片滑动切换的代码示例分享
Mar 06 Javascript
js实现移动端编辑添加地址【模仿京东】
Apr 28 Javascript
vue组件的写法汇总
Apr 12 Javascript
js利用递归与promise 按顺序请求数据的方法
Aug 30 Javascript
ES6中Promise的使用方法实例总结
Feb 18 Javascript
vue ssr+koa2构建服务端渲染的示例代码
Mar 23 Javascript
微信小程序 button样式设置为图片的方法
Jun 19 Javascript
js对字符串进行编码的方法总结(推荐)
Nov 10 #Javascript
EasyUI 结合JS导出Excel文件的实现方法
Nov 10 #Javascript
浅谈MVC+EF easyui dataGrid 动态加载分页表格
Nov 10 #Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
Nov 10 #Javascript
bootstrap的3级菜单样式,支持母版页保留打开状态实现方法
Nov 10 #Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
Nov 10 #Javascript
微信小程序 删除项目工程实现步骤
Nov 10 #Javascript
You might like
PHP中ini_set和ini_get函数的用法小结
2014/02/18 PHP
PHP加密解密函数详解
2015/10/28 PHP
如何在旧的PHP系统中使用PHP 5.3之后的库
2015/12/02 PHP
eclipse php wamp配置教程
2016/06/30 PHP
php使用curl模拟浏览器表单上传文件或者图片的方法
2018/11/10 PHP
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
2011/01/19 Javascript
页面载入结束自动调用js函数示例
2013/09/23 Javascript
JavaScript中的Math 使用介绍
2014/04/21 Javascript
使用jquery写个更改表格行顺序的小功能
2014/04/29 Javascript
JavaScript保存并运算页面中数字类型变量的写法
2015/07/06 Javascript
javascript检查某个元素在数组中的索引值
2016/03/30 Javascript
canvas实现手机端用来上传用户头像的代码
2016/10/20 Javascript
node+express制作爬虫教程
2016/11/11 Javascript
javascript中活灵活现的Array对象详解
2016/11/30 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
2016/12/14 Javascript
JS小数转换为整数的方法分析
2017/01/07 Javascript
Bootstrap模态对话框用法简单示例
2018/08/31 Javascript
使用electron实现百度网盘悬浮窗口功能的示例代码
2018/10/24 Javascript
详解Vue2 添加对scss的支持
2019/01/02 Javascript
js回溯法计算最佳旅行线路代码实例
2019/09/11 Javascript
vue3.0中使用postcss-pxtorem的具体方法
2019/11/20 Javascript
vue video和vue-video-player实现视频铺满教程
2020/10/30 Javascript
JavaScript中的Proxy对象
2020/11/27 Javascript
pytorch: tensor类型的构建与相互转换实例
2018/07/26 Python
Python django框架应用中实现获取访问者ip地址示例
2019/05/17 Python
Python弹出输入框并获取输入值的实例
2019/06/18 Python
CSS3制作漂亮的照片墙的实现代码
2016/06/08 HTML / CSS
Skip Hop官网:好莱坞宝宝挚爱品牌
2018/06/17 全球购物
药店采购员岗位职责
2014/09/30 职场文书
中国世界遗产导游词
2015/02/13 职场文书
2015年全国爱眼日活动小结
2015/02/27 职场文书
农民工工资支付承诺书
2015/05/04 职场文书
施工现场安全管理制度
2015/08/05 职场文书
组织委员竞选稿
2015/11/21 职场文书
利用Python+OpenCV三步去除水印
2021/05/28 Python
MySQL 分区表中分区键为什么必须是主键的一部分
2022/03/17 MySQL