天天看點
傳回

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執行個體，并且配置主從複制

繼續閱讀