官方网址【https://nicescroll.areaaperta.com/】  注:效果见官网右侧滚动条

jquery.nicescroll文件下载地址

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

<html>
<head>
</head>
<body id="scrollid" style='margin:10px auto; padding-right:12px; overflow:hidden;'>
<div style='height:10000px;'></div>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.nicescroll.js"></script>
<script>
$("#scrollid").niceScroll({
cursorcolor:"#CC0071",
cursoropacitymax:,
touchbehavior:false,
cursorwidth:"5px",
cursorborder:"",
cursorborderradius:"5px"
});
</script>
</body>
</html>

插件API

cursorcolor - 十六进制改变光标颜色,默认值是“#000000”

cursoropacitymin - 改变不透明度非常光标处于非活动状态(scrollabar“隐藏”状态),范围从1到0, 默认为0(隐藏)

cursoropacitymax - 改变不透明度非常光标处于活动状态(scrollabar“可见”状态),范围从1到0,默 认值是1(完全不透明)

cursorwidth - 像素光标的宽度,默认值为5(你可以写“加入5px”太)

cursorborder - 游标边框css定义,默认为“1px的固体#FFF”

cursorborderradius - 以像素为光标边界半径,默认为??“递四方”

zIndex的 - 改变z-index值的滚动条的div,默认值是9999

scrollspeed - 滚动速度,默认值为60

mousescrollstep - 高速滚动鼠标滚轮,默认值是40(像素)

touchbehavior - 使光标拖动滚动像在台式电脑触摸设备(默认:false)

hwacceleration - 使用硬件加速滚动支持的时候(默认:true)

boxzoom - 使变焦框中的内容(默认:false)

dblclickzoom - (仅当boxzoom = TRUE)变焦激活时,双击对话框(默认:true)

gesturezoom - (仅当boxzoom =真实,使用触摸设备)上缩放框激活时,间距输出/输入(默认:true)

grabcursorenabled,显示“抢”图标的div touchbehavior = true时,(默认:true)

autohidemode,如何隐藏滚动条的作品,真=默认/“光标”=只进游标隐藏/ false =不隐藏背景,CSS改变轨道的背景下,默认为“”

iframeautoresize,在加载事件AUTORESIZE的iframe(默认:true)

cursorminheight,设置在像素的最小光标高度(默认值:20)

preservenativescrolling,您可以滚动本机可滚动区域用鼠标,冒泡鼠标滚轮事件(默认:true)

railoffset,您可以添加抵消顶部/左边的轨道位置(默认:false)

bouncescroll,使滚动弹跳在内容结尾作为移动像(仅HW ACCELL)(默认:false)

spacebarenabled,使向下翻页时,空格键已经按下滚动(默认:true)

railpadding,设置填充为铁路吧(默认值:{顶:0,右:0,左:0,下:0})

disableoutline,对于chrome浏览器,停用大纲(橙色hightlight)选择具有nicescroll一个div(默认: true)时,

horizrailenabled,nicescroll可以管理水平滚动(默认:true)

railalign,取向垂直导轨(defaul:“右”)

railvalign,对齐水平导轨(defaul:“底部”)

enabletranslate3d,nicescroll可以使用CSS转换为滚动内容(默认:true)

enablemousewheel,nicescroll可以管理的鼠标滚轮事件(默认:true)

enablekeyboard,nicescroll可以管理键盘事件(默认:true)

smoothscroll,滚动自如移动(默认:true)

sensitiverail,点击轨道上进行滚动(默认:true)

enablemouselockapi,可以用鼠标说明锁的API(对象拖动同样的问题)(默认:true)

cursorfixedheight,用于光标在像素设置固定的高度(默认:false)

hidecursordelay,设置在微秒淡出滚动条的延迟时间(默认值:400)

directionlockdeadzone,在对方向锁定激活像素死区(默认值:6)

nativeparentscrolling,检测内容底部,并让家长来滚动,作为原生滚动做(默认:true)

enablescrollonselection,启用自动滚动的内容时,选择文本(默认:true)

niceScroll 简单使用 及 插件API的更多相关文章

  1. 【UI插件】简单的日历插件(下)—— 学习MVC思想

    前言 我们上次写了一个简单的日历插件,但是只是一个半成品,而且做完后发现一些问题,于是我们今天尝试来解决这些问题 PS:距离上次貌似很久了 上次,我们大概遇到哪些问题呢: ① 既然想做一套UI库,那么 ...

  2. 实现一个简单的Vue插件

    我们先看官方文档对插件的描述 插件通常会为 Vue 添加全局功能.插件的范围没有限制--一般有下面几种: 1.添加全局方法或者属性,如: vue-custom-element 2.添加全局资源:指令/ ...

  3. Awesomplete - 零依赖的简单自动完成插件

    Awesomplete 是一款超轻量级的,可定制的,简单的自动完成插件,零依赖,使用现代化标准构建.你可以简单地添加 awesomplete 样式,让它自动处理(你仍然可以通过指定 HTML 属性配置 ...

  4. 接口测试从未如此简单 - Postman (Chrome插件)

    接口测试从未如此简单 - Postman (Chrome插件) 一个非常有力的Http Client工具用来测试Web服务的, 我这里来介绍如何用它测试restful web service 注:转载 ...

  5. 编写一个简单的Jquery插件

    1.实现内容 定义一个简单的jquery插件,alert传递进来的参数 2.插件js文件(jquery.showplugin.js) (function ($) { //定义插件中的方法 var me ...

  6. NSIS:简单按钮美化插件SkinButton,支持透明PNG图片。

    原文 NSIS:简单按钮美化插件SkinButton,支持透明PNG图片. 征得作者贾可的同意,特发布按钮美化插件SkinButton. 插件说明: 使用GDI+库写的一个简单按钮美化插件,支持透明P ...

  7. 原生js简单调用百度翻译API实现的翻译工具

    先来个在线demo: js翻译工具 或者百度搜索js简单调用百度翻译API工具(不过有个小小的界面显示bug,我想细心的人应该会发现) 或者直接前往该网址:js翻译工具 或者前往我的github:gi ...

  8. 手把手制作一个简单的IDEA插件(环境搭建Demo篇)

    新建IDEA插件File --> new --> Project--> Intellij PlatForm Plugin-->Next-->填好项目名OK 编写插件新建工 ...

  9. 使用jQuery.extend创建一个简单的选项卡插件

    选项卡样式如图,请忽略丑陋的样式,样式可以随意更改 主要是基于jquery的extend扩展出的一个简单的选项卡插件,注意:这里封装的类使用的是es6中的class,所以不兼容ie8等低版本浏览器呦! ...

随机推荐

  1. Thinkphp5获取数据库数据到视图

    这是学习thinkhp5的基础篇笔记. 本文主要讲怎么配置数据库链接,以及查询数据库数据,并且最后将数据赋给视图. 数据库配置: thinkphp5的数据库配置默认在conf下的database.ph ...

  2. 【Redis】- 双写一致性

    首先,缓存由于其高并发和高性能的特性,已经在项目中被广泛使用.在读取缓存方面,大家没啥疑问,都是按照下图的流程来进行业务操作. 但是在更新缓存方面,对于更新完数据库,是更新缓存呢,还是删除缓存.又或者 ...

  3. Java 8中 基本数据类型

    1)四种整数类型(byte.short.int.long):    byte:8 位,用于表示最小数据单位,如文件中数据,-128~127    short:16 位,很少用,-32768 ~ 327 ...

  4. intelliJ IDEA最常用的快捷键

    一.使用相关快捷键 1.重写接口实现类:Ctrl+I 2.搜索:Shift+Shift   3.生成get或set方法快捷键:Alt+insert: 4.导入未实现的方法,强制类型转换:Alt+Ent ...

  5. 【bzoj4921】[Lydsy六月月赛]互质序列 暴力

    题目描述 给出一个序列,要求删除一段非空区间,使得剩下的数的个数大于等于2.求所有删除方式剩下的数的最大公约数的和. 输入 第一行包含一个正整数n(3<=n<=100000),表示序列的长 ...

  6. 前端基础:CSS属性操作

    CSS属性操作 1.文本 文本颜色:color,颜色属性被用来设置文字的颜色,颜色是通过CSS经常指定的,其格式有: 1.十六进制:#FF0000: 2.RGB值:RGB(255,0,0): 3.颜色 ...

  7. 使用for循环遍历数组元素

    循环可以将代码块执行指定的次数.如果您希望一遍又一遍地运行相同的代码,并且每次的值都不同,那么使用循环是很方便的.迭代语句又叫循环语句. JavaScript 支持不同类型的循环: for - 循环代 ...

  8. Codeforces 1025D(区间dp)

    容易想到设f[i][j][k]为i~j区间以k为根是否能构成bst.这样是O(n4)的.考虑将状态改为f[i][j][0/1]表示i~j区间以i-1/j+1为根能否构成bst.显然如果是i-1作为根的 ...

  9. 进程间通讯-3(Manager)-实现数据的同时修改

    Manager 可以实现列表,字典,变量,锁,信号量,事件等的数据之间的共享.Manager已经默认加锁了.控制数据不会乱. 实现了不同进程之间数据的共享,并且可以同时修改. from multipr ...

  10. 【题解】CF#403 D-Beautiful Pairs of Numbers

    这题还挺对胃口的哈哈~是喜欢的画风!回家路上一边听歌一边想到的解法,写出来记录一下…… 首先,由于 \(b_{k} < a_{k + 1}\) ,所以我们可以看作是在一个长度为 n 的序列上选择 ...