1. 首页
  2. 插件控件
  3. niceScroll滚动条插件

niceScroll滚动条插件

niceScroll滚动条插件是一个非常强大的基于jQuery的滚动条插件，不需要增加额外的css，几乎全浏览器兼容。ie6+，实现只需要一段代码，侵入性非常小，样式可完全自定义，支持触摸事件，可在触摸屏上使用；官网地址：http://www.areaaperta.com/nicescroll/。

天龙八部（佛教含义）

天龙八部，佛教术语，天龙八部都是“非人”，包括八种神道怪物，因为“天众”及“龙众”最为重要，所以称为“天龙八部”。八部包括：一天众、二龙众、三夜叉、四乾达婆、五阿修罗、六迦楼罗、七紧那罗、八摩睺罗伽。许多大乘佛经叙述佛向诸菩萨、比丘等说法时，常有天龙八部参与听法。如《法华经：提婆达多品》：“天龙八部、人与非人，皆遥见彼龙女成佛”。“非人”是形貌似人，而实际不是人的众生。

天众

“天众”，佛教宇宙观有三界（欲界、色界、无色界）六道（天、人、阿修罗、畜生、饿鬼、地狱）之说，欲界有六重天：四天王天、三十三天、夜摩天、兜率天、化乐天、他化自在天。色界有十八天：梵辅天，大梵天，梵众天，无量光天，光音天，少光天，徧净天，无量净天，无想天，少净天，广果天，福生天，无云天，无烦天，无热天，善现天，善见天，色究竟天。无色界四空天：空无边处天，识无边处天，无所有处天，非想非非想处天。“天众”就是生活在各层天的众生，他们的生活比人间优胜得多，寿命也长得多。天众当然也包括天王，如帝释天主、大梵天王等，民间常称天王为神。中文常用省略语，所以“天”字至少包括四义：一、苍穹；二、天界；三、天人；四、天王。天众指的就是天人和天王。

佛教认为一切事物无常，六道众生处于轮回之中，所以尽管天人的福报大，但他们的寿命终了之后，还是要死的。天人临终之前有五种征状：衣裳垢腻、头上花萎、身体臭秽、腋下汗出、不乐本座（第五个征状或说是“玉子离散”），这就是所谓“天人五衰”，是天人最大的悲哀。帝释是众天人的领袖。

龙众

“龙众”中的“龙”，跟我国传说中的“龙王”或“龙”不同，主要生活在水中，实为那伽。我国“龙”的历史已经被推到8000年前，就时间来说，应该是我国的龙文化被印度吸收，佛经中有五龙王、七龙王、八龙王等等名称，古印度人对龙非常尊敬，认为水中生物以龙的力气最大，因此尊称德行崇高的人为“龙象”，如“西来龙”指从西方来的高僧。古印度人以为下雨是龙从天海中取水而洒下人间，这点也和我国古代文化中的龙很相近。历书上注明几龙取水，表示该年雨量的多寡。龙王之中，有一位叫做沙竭罗（意为海）龙王，他的幼女八岁时到释迦牟尼说法的灵鹫山前，听释迦牟尼讲说《妙法莲华经》之后，向释迦牟尼佛进献宝珠，即刻转为男身，腾空而起驾祥云往南方无垢世界示现成佛度众。这一罕见盛况，为天龙八部所见。

夜叉

“夜叉”是佛经中的一种鬼神，其中首领有“夜叉八大将”、“十六大夜叉将”等。“夜叉”本义是能吃鬼的神，又有敏捷、勇健、轻灵、秘密等意思。“维摩经”注：“什曰：‘夜叉有三种：一、在地，二、在空虚，三、天夜叉也。’”现在人们说到“夜叉”常指恶鬼。但在佛经中，很多夜叉受佛教化转为护法善神，夜叉八大将的任务是“维护众生界”。

乾达婆

“乾达婆”又称为“香神”，是一种不吃酒肉、只寻香气作为滋养的神，是服侍帝释天的专管奏乐演唱的乐神之一，身上发出浓冽的香气，“乾达婆”在梵语中有“变幻莫测”的意思，魔术师也叫“乾达婆”，海市蜃楼叫做“乾达婆城”。香气和音乐都是隐约缥缈，难以捉摸。

阿修罗

“阿修罗”这种神道非常特别，男的极丑陋，而女的极美丽。阿修罗王常常率部和帝释战斗，因为阿修罗有美女而无美好食物，帝释有美食而无美女，互相妒忌抢夺，每有恶战，总是打得天翻地覆。大战的结果，阿修罗往往战败，上天下地无处可逃，于是化身潜入藕的丝孔之中。

阿修罗王性子暴躁、执拗而善妒。释迦牟尼说法，说“四念处”，阿修罗王也说法，说“五念处”；释迦牟尼说“三十七道品”，阿修罗王偏又多一品，“说三十八道品”。《大智度论》卷三十五：“阿修罗其心不端故，常疑于佛，谓佛助天。佛为说‘五众’，谓有六众，不为说一；若说‘四谛’，谓有五谛，不说一事。”“五众”即五蕴”，四谛是佛法中的基本观念。阿修罗王权力很大，能力很大，就是爱搞“天下大乱，越乱越好”的事，阿修罗又疑心很重，在听佛说法时，疑心佛偏袒帝释，故意少说了一样。佛经中的神话故事大都是譬喻。

迦楼罗

“迦楼罗”指“金翅鸟神”。这是一种大鸟，翅有种种庄严宝色，头上有一颗凸起的如意珠，此鸟鸣声悲苦，以龙为食，每天要吃一条龙及五百条小龙。到命终时，体内积聚诸毒，无法再吃，于是上下翻飞七次，飞到金刚轮山顶上命终。因为一生以龙（大毒蛇）为食物，体内积蓄毒气极多，临死时毒发自焚。肉身烧去后只余一心，作纯青琉璃色。曾有旧小说称岳飞是“大鹏金翅鸟”投胎转世。

紧那罗

“紧那罗”是歌神，是专门演奏法乐的音乐家。在梵语中为“人非人”之意。他形状和人一样，但头上生一只角，所以称为“人非人”，善于歌舞，是帝释的乐神。

摩呼罗迦

“摩呼罗迦”是大蟒神，人身而蛇头。在《首楞严经》中对摩呼罗迦有以下解释：“摩呼罗伽，此云地龙，亦云蟒神，腹行之类也。由痴恚而感此身，聋呆无知，故乐脱伦。修慈修慧，挽回前因，脱彼伦类也。”也就是说，摩呼罗迦是与天龙相对应的地龙，原本是腹行类，但“由痴恚而感此身”，由于“聋呆无知”，反而能“故乐脱伦、修慈修慧”，最终挽回前因，摆脱腹行类，脱胎换骨。

使用说明：

  1. 请确定已经引入了 jq.niceScroll.min.js

  2. 基本用法

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

  3. 隐藏滚动条

    1. $(e).getNiceScroll().hide();

  4. 检测滚动条是否重置大小（当窗口改变大小时）

    1. $(e).getNiceScroll().resize();

  5. 滚动到某个位置

    1. $(e).getNiceScroll(0).doScrollLeft(x, duration); // Scroll X Axis
    2. $(e).getNiceScroll(0).doScrollTop(y, duration); // Scroll Y Axis

  6. $(e).niceScroll() 配置参数表：

    1. $(e).niceScroll({
    2. cursorcolor: "#424242", // 改变滚动条颜色，使用16进制颜色值
    3. cursoropacitymin: 0, // 当滚动条是隐藏状态时改变透明度, 值范围 1 到 0
    4. cursoropacitymax: 1, // 当滚动条是显示状态时改变透明度, 值范围 1 到 0
    5. cursorwidth: "5px", // 滚动条的宽度，单位：便素
    6. cursorborder: "1px solid #fff", // CSS方式定义滚动条边框
    7. cursorborderradius: "5px", // 滚动条圆角（像素）
    8. zindex: "auto" | <number>, // 改变滚动条的DIV的z-index值
    9. scrollspeed: 60, // 滚动速度
    10. mousescrollstep: 40, // 鼠标滚轮的滚动速度 (像素)
    11. touchbehavior: false, // 激活拖拽滚动
    12. hwacceleration: true, // 激活硬件加速
    13. boxzoom: false, // 激活放大box的内容
    14. dblclickzoom: true, // (仅当 boxzoom=true时有效)双击box时放大
    15. gesturezoom: true, // (仅 boxzoom=true 和触屏设备时有效) 激活变焦当out/in（两个手指外张或收缩）
    16. grabcursorenabled: true // (仅当 touchbehavior=true) 显示“抓住”图标display "grab" icon
    17. autohidemode: true, // 隐藏滚动条的方式, 可用的值:
    18. true | // 无滚动时隐藏
    19. "cursor" | // 隐藏
    20. false | // 不隐藏,
    21. "leave" | // 仅在指针离开内容时隐藏
    22. "hidden" | // 一直隐藏
    23. "scroll", // 仅在滚动时显示
    24. background: "", // 轨道的背景颜色
    25. iframeautoresize: true, // 在加载事件时自动重置iframe大小
    26. cursorminheight: 32, // 设置滚动条的最小高度 (像素)
    27. preservenativescrolling: true, // 你可以用鼠标滚动可滚动区域的滚动条和增加鼠标滚轮事件
    28. railoffset: false, // 可以使用top/left来修正位置
    29. bouncescroll: false, // (only hw accell) 启用滚动跳跃的内容移动
    30. spacebarenabled: true, // 当按下空格时使页面向下滚动
    31. railpadding: { top: 0, right: 0, left: 0, bottom: 0 }, // 设置轨道的内间距
    32. disableoutline: true, // 当选中一个使用nicescroll的div时，chrome浏览器中禁用outline
    33. horizrailenabled: true, // nicescroll可以管理水平滚动
    34. railalign: right, // 对齐垂直轨道
    35. railvalign: bottom, // 对齐水平轨道
    36. enabletranslate3d: true, // nicescroll 可以使用CSS变型来滚动内容
    37. enablemousewheel: true, // nicescroll可以管理鼠标滚轮事件
    38. enablekeyboard: true, // nicescroll可以管理键盘事件
    39. smoothscroll: true, // ease动画滚动
    40. sensitiverail: true, // 单击轨道产生滚动
    41. enablemouselockapi: true, // 可以用鼠标锁定API标题 (类似对象拖动)
    42. cursorfixedheight: false, // 修正光标的高度（像素）
    43. hidecursordelay: 400, // 设置滚动条淡出的延迟时间（毫秒）
    44. directionlockdeadzone: 6, // 设定死区，为激活方向锁定（像素）
    45. nativeparentscrolling: true, // 检测内容底部便于让父级滚动
    46. enablescrollonselection: true, // 当选择文本时激活内容自动滚动
    47. cursordragspeed: 0.3, // 设置拖拽的速度
    48. rtlmode: "auto", // DIV的水平滚动从左边开始
    49. cursordragontouch: false, // 使用触屏模式来实现拖拽
    50. oneaxismousemode: "auto", // 当只有水平滚动时可以用鼠标滚轮来滚动，如果设为false则不支持水平滚动，如果设为auto支持双轴滚动
    51. scriptpath: "" // 为boxmode图片自定义路径 ("" => same script path)
    52. preventmultitouchscrolling: true // 防止多触点事件引发滚动
    53. });

另外注意：当在同一页面中使用多个nicescroll插件时，要及时隐藏用完的nicescroll对象，加载时，需要先show，再resize。当插件放在具有absolute浮动的容器中，并设置了top值时，插件的top会出现问题，解决方法使用插件的railoffset属性