Article Detail

jQuery.nicescroll 中文API21

jQuery.NiceScroll;一个模仿ios/mobile滚动条风格美化浏览器;1、简单模式,使用默认样式;$(document).ready(funct...

HTML 阅读 15.6万 13 分钟阅读 2015-11-23 17:14
GDScript3
147 行
jQuery.NiceScroll;一个模仿ios/mobile滚动条风格美化浏览器;1、简单模式,使用默认样式;$(document).ready(functi;$("html").nice;});;2、作为实例和对象返回;varnice=false;;$(document).ready(functi;nice=$("html

jQuery.NiceScroll

一个模仿ios/mobile滚动条风格美化浏览器滚动条的jQuery插件。 NiceScroll初始化声明文档

1、 简单模式,使用默认样式。

$(document).ready(function() {

$("html").niceScroll();

});

2、 作为实例和对象返回

var nice = false;

$(document).ready(function() {

nice = $("html").niceScroll();

});

3、 设置光标颜色

$(document).ready(function() {

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

});

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

$(document).ready(function() {

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

5、获取nicescroll对象

var nice = $("#mydiv").getNiceScroll();

6、隐藏滚动条

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

7、检查滚动条大小变化(当窗口大小变化时滚动条跟着变化) $("#mydiv").getNiceScroll().resize();

8、滚动到指定位置

$("#mydiv").getNiceScroll(0).doScrollLeft(x, duration); // 沿X轴滚动 $("#mydiv").getNiceScroll(0).doScrollTop(y, duration); // 沿Y轴滚动

参数一:滚动距离,正数X轴向右滚动、Y轴向下滚动,负数反之。 参数二:滚动持续时间

9、配置参数

$("#thisdiv").niceScroll({

cursorcolor:"#424242", // 设置光标颜色

cursoropacitymin:0, // 设置非活动状态光标透明度,取值范围0-1,默认为0。

cursoropacitymax:1, //设置活动状态光标透明度,取值范围0-1,默认为1。 cursorwidth:"5px", //设置光标宽度

cursorborder:"1px solid #fff",// 设置光标边框

cursorborderradius:"5px", //设置光标圆角,默认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, // for chrome browser, disable outline (orange highlight) when selecting a div with nicescroll禁用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设备上鼠标展现拽托状态drag cursor in touch / touchbehavior mode also

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)
Comments 评论区
评论区 当前文章还没有公开评论
Comment Form 留下评论
正在回复 #0
粘贴图片、拖拽文件,或点上面的按钮上传 图片会自动插入 [img] 标签,其他附件会自动插入 [attach] 标签。
正在上传...
提交前会先拉起旧项目同款第三方人机验证。

不再要求填写昵称;reply 会生成一条带楼层回链的新评论,quote 会附带完整引用块,并保持评论锚点跳转。

lizhenqiu blog is powered by lizhenqiu.com Version 6.9

Processed in 0.0257 second(s) W3C

本博客的所有原创作品采用 知识共享 署名-非商业性使用-相同方式共享 2.5 协议 进行许可

本站由 七七牛 云存储 阿阿里云 计算与安全服务 拍又拍云 CDN 加速 百百度智能 AAMH 布布集网 AI指南针AI

桂公网安备 45010302000998号 桂ICP备15007619号-1 中国互联网举报中心 建议使用谷歌浏览器浏览
Navigation 文章导航
⌂ ↓ ↑
100%
图片预览
Gallery 图集
0 张图片

正在整理正文和评论里的图片。

当前页还没有可展示的图片。
Quick Comment 快速评论

直接输入内容,提交时仍会走当前页面的人机验证。

正在上传...
操作提示