天天看点
返回

jQuery - 滚动条插件 NiceScroll 使用详解（滚动条美化）

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

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

一、NiceScroll 介绍

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

1，GitHub 主页

  • https://github.com/inuyaksa/jquery.nicescroll

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

, 

// 隐藏滚动条的方式, 可用的值如下:

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

js插件
上一篇: (一) 美化滚动条插件 - jQuery.NiceScroll.js
下一篇: linux 下 创建多个redis实例，并且配置主从复制

继续阅读