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 相关文章推荐
IE本地存储userdata的一个bug说明
Jul 01 Javascript
用js小类库获取浏览器的高度和宽度信息
Jan 15 Javascript
js获取鼠标点击的位置实现思路及代码
May 09 Javascript
javascript使用正则表达式检测IP地址
Dec 03 Javascript
JavaScript 对象详细整理总结
Sep 29 Javascript
JavaScript仿微博发布信息案例
Nov 16 Javascript
JavaScript实现审核流程状态的动态显示进度条
Mar 15 Javascript
JavaScript之RegExp_动力节点Java学院整理
Jun 29 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
Sep 30 Javascript
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
Nov 27 Javascript
JS实现返回上一页并刷新页面的方法分析
Jul 16 Javascript
Node.js API详解之 readline模块用法详解
May 22 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
用cookies来跟踪识别用户
2006/10/09 PHP
PHP array_multisort() 函数的深入解析
2013/06/20 PHP
php使用pecl方式安装扩展操作示例
2019/08/12 PHP
JS操作Cookie写入和读取实例代码
2013/10/20 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
2014/06/30 Javascript
jQuery实现提示密码强度的代码
2015/07/15 Javascript
省市联动效果的简单实现代码(推荐)
2016/06/06 Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
2016/10/30 Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
2016/11/30 Javascript
详解Javascript百度地图接口开发文档中的类和方法
2017/02/07 Javascript
Move.js入门
2017/02/08 Javascript
微信小程序中上传图片并进行压缩的实现代码
2018/08/28 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
2018/09/26 Javascript
js比较两个单独的数组或对象是否相等的实例代码
2019/04/28 Javascript
JS利用prototype给类添加方法操作详解
2019/06/21 Javascript
原生Vue 实现右键菜单组件功能
2019/12/16 Javascript
JavaScript ES6 Class类实现原理详解
2020/05/08 Javascript
JS实现无限轮播无倒退效果
2020/09/21 Javascript
Python 中的with关键字使用详解
2016/09/11 Python
Python实现删除文件中含“指定内容”的行示例
2017/06/09 Python
JPype实现在python中调用JAVA的实例
2017/07/19 Python
python3.x上post发送json数据
2018/03/04 Python
PyQt5 实现字体大小自适应分辨率的方法
2019/06/18 Python
Window系统下Python如何安装OpenCV库
2020/03/05 Python
python中format函数如何使用
2020/06/22 Python
python matplotlib工具栏源码探析二之添加、删除内置工具项的案例
2021/02/25 Python
HTML5实现一个能够移动的小坦克示例代码
2013/09/02 HTML / CSS
调用HTML5的Canvas API绘制图形的快速入门指南
2016/06/17 HTML / CSS
西班牙香水和化妆品购物网站:Arenal Perfumerías
2019/03/01 全球购物
品牌宣传方案
2014/03/21 职场文书
欢迎词怎么写
2015/01/23 职场文书
合作合同协议书范本
2015/01/27 职场文书
市场督导岗位职责
2015/04/10 职场文书
Python办公自动化之教你如何用Python将任意文件转为PDF格式
2021/06/28 Python
React 并发功能体验(前端的并发模式)
2021/07/01 Javascript
Vue组件化(ref,props, mixin,.插件)详解
2022/05/15 Vue.js