jQuery - 滚动条插件 NiceScroll 使用详解(滚动条美化)

    有时为了保持页面风格的统一,我们需要修改滚动条的样式。虽然我们可以通过 CSS 设置滚动条各部分的颜色样式,但这种方式不支持老版本的浏览器。而且不同的浏览器下,CSS 滚动条属性的写法也不一样,如果各个浏览器都需要兼容(特别是移动设备的浏览器),那就十分麻烦了。

    这里推荐一个十分好用的滚动条插件:Nicescroll

一、NiceScroll 介绍

NiceScroll 是一款完全基于 jQuery 框架的滚动条插件,它不仅有着类似 iOS 系统设备的滚动条外观,而且还支持任意的 <div>、<iframe>、<body> 元素的滚动效果。

 

1,GitHub 主页

 

2,功能特点

  • 不需要增加额外的 CSS。
  • 几乎全浏览器兼容:Chrome、Firefox、Edge、IE8+、Safari、Opera
  • 实现只需要一段代码,侵入性非常小。
  • 样式可完全自定义。
  • 支持触摸事件,可在触摸屏上使用。

 

3,配置说明

(1)页面中引入 jquery.js
(2)页面中引入 jquery.nicescroll.js
(3)如果需要用到全屏放大功能的话,还要把 zoomico.png 复制到与 jquery.nicescroll.js 同一个文件夹下。

 

二、基本用法

1,最简单的用法

(1)我们只需在页面初始化完毕后,对需要使用这个滚动条插件的元素调用 niceScroll() 方法即可。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title></title>

    <script src="js/jquery-3.1.1.js" charset="utf-8"></script>

    <script src="js/jquery.nicescroll.js" charset="utf-8"></script>

    <script type="text/javascript">

      $(document).ready(

        function() {

          $("html").niceScroll();

        }

      );

    </script>

  </head>

  <style>

    li {

      height: 50px;

    }

  </style>

  <body>

    <ul>

      <li>条目1</li>

      <li>条目2</li>

      <li>条目3</li>

      <li>条目4</li>

      <li>条目5</li>

    </ul>

  </body>

</html>


(2)这里我直接是让整个页面使用 NiceScroll 插件,默认情况下滚动条是自动隐藏的,即内容如果超出窗口时滚动条也不会显示。(当然此时通过鼠标滚轮还是可以滚动页面的)

原文:jQuery - 滚动条插件 NiceScroll 使用详解(滚动条美化)

 

(3)当鼠标移到窗口右侧时,滚动条则会显示出来。我们可以拖动它进行页面滚动。

原文:jQuery - 滚动条插件 NiceScroll 使用详解(滚动条美化)

 

2,返回滚动条对象

1

2

3

4

var nice = false;

$(function() { 

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

});

 

3,使用容器“wrapper”包含DIV

这种方式由两个 DIV 组成,前一个为 vieport,后一个为里面内容。

1

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

如果遇到加载数据的时候 nicescroll 滚动条闪烁,还有对绝对定位的元素(例如下拉框)使用滚动条,特别是在需要滚动条比较多的页面,导致位置错乱的等问题。那么需要使用这个方法对设置滚动条的元素的直接子元素进行设置,比如:
    $("#viewportdiv").niceScroll("#wrapperdiv",{
            'cursorcolor':'#686868',
            'cursorborder':'none',
            'smoothscroll': 'false',
            'autohidemode':false
    });

 

4,隐藏滚动条

注意:这个只是把滚动条隐藏,使用鼠标滚轮仍然可以进行滚动。

1

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

 

5,重置滚动条大小

1

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

 

6,滚动到某个指定位置

1

2

3

4

5

//水平方向滚动(距左侧100px)

$("#div1").getNiceScroll(0).doScrollLeft(100);

 

//垂直方向滚动(距上方100px)

$("#div1").getNiceScroll(0).doScrollTop(100);

7,删除滚动条

1

$("#div1").getNiceScroll().remove();

 

 

$("#div1").niceScroll({

       cursorborder:"",//不需要border

       cursorcolor:"#C1C1C1",//滚动条颜色

       boxzoom:false,//禁止放大box的内容

       autohidemode:false,//禁止隐藏

       horizrailenabled:false //水平方向禁用

});

三、常用配置参数

在调用 niceScroll() 方法初始化滚动条时,我们可以传入一些参数属性,从而对滚动条的样式以及行为进行修改。

 

1,简单的样式修改

(1)这里我们对滚动条的颜色和触摸滚动模式进行的修改。

1

2

3

4

5

6

7

8

$("#div1").niceScroll({

    touchbehavior:true,     //是否是触摸式滚动效果

    cursorcolor:"#333",     //滚动条的颜色值

    cursoropacitymax:0.6,   //滚动条的透明度值

    cursorwidth:20,         //滚动条的宽度值

    background:"#00F",  //滚动条的背景色,默认是透明的

    autohidemode:true,      //滚动条是否是自动隐藏,默认值为 true

});


(2)效果图

原文:jQuery - 滚动条插件 NiceScroll 使用详解(滚动条美化)

 

2,全屏放大显示

(1)要开启全屏放大功能,只需把 boxzoom 参数设置为 true。(同时记得把 zoomico.png 放到与 jquery.nicescroll.js 同一个文件夹下)

1

2

3

$("#div1").niceScroll({

    boxzoom: true  //显示放大镜标按钮,(默认为false)

});


(2)当我们将鼠标移到滚动区域右侧时,在滚动条旁边会显示出一个“放大”图标。点击后该区域会自动放大占满整个浏览器窗口。

原文:jQuery - 滚动条插件 NiceScroll 使用详解(滚动条美化)

 

(3)而当这个区域放大后,右上角的这个图标又会变成“缩小”图标,点击后该区域则又还原回原来的位置和尺寸。

原文:jQuery - 滚动条插件 NiceScroll 使用详解(滚动条美化)

 

3,完整的配置参数表

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

$("#div1").niceScroll({

        cursorcolor: "#424242"// 改变滚动条颜色,使用16进制颜色值

        cursoropacitymin: 0, // 当滚动条是隐藏状态时改变透明度, 值范围 1 到 0

        cursoropacitymax: 1, // 当滚动条是显示状态时改变透明度, 值范围 1 到 0

        cursorwidth: "5px"// 滚动条的宽度,单位:便素

        cursorborder: "1px solid #fff"// CSS方式定义滚动条边框

        cursorborderradius: "5px"// 滚动条圆角(像素)

        zindex: "auto"// 改变滚动条的DIV的z-index值(auto或数字)

        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 // 防止多触点事件引发滚动

    });


原文出自:www.hangge.com  转载请保留原文链接:http://www.hangge.com/blog/cache/detail_1931.html

转载于:http://www.hangge.com/blog/cache/detail_1931.html

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值