當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發(fā)布時(shí)間：2023/12/10 编程问答 44 豆豆

生活随笔收集整理的這篇文章主要介紹了 jQuery - 滚动条插件 NiceScroll 使用详解（滚动条美化）小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

? ? 有時(shí)為了保持頁面風(fēng)格的統(tǒng)一，我們需要修改滾動(dòng)條的樣式。雖然我們可以通過?CSS?設(shè)置滾動(dòng)條各部分的顏色樣式，但這種方式不支持老版本的瀏覽器。而且不同的瀏覽器下，CSS?滾動(dòng)條屬性的寫法也不一樣，如果各個(gè)瀏覽器都需要兼容（特別是移動(dòng)設(shè)備的瀏覽器），那就十分麻煩了。

? ? 這里推薦一個(gè)十分好用的滾動(dòng)條插件：Nicescroll

一、NiceScroll 介紹

NiceScroll?是一款完全基于?jQuery?框架的滾動(dòng)條插件，它不僅有著類似?iOS?系統(tǒng)設(shè)備的滾動(dòng)條外觀，而且還支持任意的?<div>、<iframe>、<body>?元素的滾動(dòng)效果。

1，GitHub 主頁

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

2，功能特點(diǎn)

不需要增加額外的?CSS。
幾乎全瀏覽器兼容：Chrome、Firefox、Edge、IE8+、Safari、Opera
實(shí)現(xiàn)只需要一段代碼，侵入性非常小。
樣式可完全自定義。
支持觸摸事件，可在觸摸屏上使用。

3，配置說明

（1）頁面中引入?jquery.js
（2）頁面中引入?jquery.nicescroll.js
（3）如果需要用到全屏放大功能的話，還要把?zoomico.png?復(fù)制到與?jquery.nicescroll.js?同一個(gè)文件夾下。

二、基本用法

1，最簡單的用法

（1）我們只需在頁面初始化完畢后，對需要使用這個(gè)滾動(dòng)條插件的元素調(diào)用?niceScroll()?方法即可。

<!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）這里我直接是讓整個(gè)頁面使用?NiceScroll?插件，默認(rèn)情況下滾動(dòng)條是自動(dòng)隱藏的，即內(nèi)容如果超出窗口時(shí)滾動(dòng)條也不會(huì)顯示。（當(dāng)然此時(shí)通過鼠標(biāo)滾輪還是可以滾動(dòng)頁面的）

（3）當(dāng)鼠標(biāo)移到窗口右側(cè)時(shí)，滾動(dòng)條則會(huì)顯示出來。我們可以拖動(dòng)它進(jìn)行頁面滾動(dòng)。

2，返回滾動(dòng)條對象

var?nice =?false;

$(function() {?

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

});

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

這種方式由兩個(gè)?DIV?組成，前一個(gè)為?vieport，后一個(gè)為里面內(nèi)容。

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

如果遇到加載數(shù)據(jù)的時(shí)候?nicescroll?滾動(dòng)條閃爍，還有對絕對定位的元素（例如下拉框）使用滾動(dòng)條，特別是在需要滾動(dòng)條比較多的頁面，導(dǎo)致位置錯(cuò)亂的等問題。那么需要使用這個(gè)方法對設(shè)置滾動(dòng)條的元素的直接子元素進(jìn)行設(shè)置，比如：
? ??$("#viewportdiv").niceScroll("#wrapperdiv",{
? ? ? ? ? ? 'cursorcolor':'#686868',
? ? ? ? ? ? 'cursorborder':'none',
? ? ? ? ? ? 'smoothscroll': 'false',
? ? ? ? ? ? 'autohidemode':false
? ? });

4，隱藏滾動(dòng)條

注意：這個(gè)只是把滾動(dòng)條隱藏，使用鼠標(biāo)滾輪仍然可以進(jìn)行滾動(dòng)。

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

5，重置滾動(dòng)條大小

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

6，滾動(dòng)到某個(gè)指定位置

//水平方向滾動(dòng)（距左側(cè)100px）

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

//垂直方向滾動(dòng)（距上方100px）

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

7，刪除滾動(dòng)條

1	$("#div1").getNiceScroll().remove(); ? ? $("#div1").niceScroll({ ? ? ? ?cursorborder:"",//不需要border ? ? ? ?cursorcolor:"#C1C1C1",//滾動(dòng)條顏色 ? ? ? ?boxzoom:false,//禁止放大box的內(nèi)容 ? ? ? ?autohidemode:false,//禁止隱藏 ? ? ? ?horizrailenabled:false //水平方向禁用 });

三、常用配置參數(shù)

在調(diào)用?niceScroll()?方法初始化滾動(dòng)條時(shí)，我們可以傳入一些參數(shù)屬性，從而對滾動(dòng)條的樣式以及行為進(jìn)行修改。

1，簡單的樣式修改

（1）這里我們對滾動(dòng)條的顏色和觸摸滾動(dòng)模式進(jìn)行的修改。

$("#div1").niceScroll({

????touchbehavior:true,?????//是否是觸摸式滾動(dòng)效果

????cursorcolor:"#333",?????//滾動(dòng)條的顏色值

????cursoropacitymax:0.6,???//滾動(dòng)條的透明度值

????cursorwidth:20,?????????//滾動(dòng)條的寬度值

????background:"#00F",??//滾動(dòng)條的背景色，默認(rèn)是透明的

????autohidemode:true,??????//滾動(dòng)條是否是自動(dòng)隱藏，默認(rèn)值為 true

});

（2）效果圖

2，全屏放大顯示

（1）要開啟全屏放大功能，只需把?boxzoom?參數(shù)設(shè)置為?true。（同時(shí)記得把?zoomico.png?放到與?jquery.nicescroll.js?同一個(gè)文件夾下）

$("#div1").niceScroll({

????boxzoom:?true??//顯示放大鏡標(biāo)按鈕，(默認(rèn)為false)

});

（2）當(dāng)我們將鼠標(biāo)移到滾動(dòng)區(qū)域右側(cè)時(shí)，在滾動(dòng)條旁邊會(huì)顯示出一個(gè)“放大”圖標(biāo)。點(diǎn)擊后該區(qū)域會(huì)自動(dòng)放大占滿整個(gè)瀏覽器窗口。

（3）而當(dāng)這個(gè)區(qū)域放大后，右上角的這個(gè)圖標(biāo)又會(huì)變成“縮小”圖標(biāo)，點(diǎn)擊后該區(qū)域則又還原回原來的位置和尺寸。

3，完整的配置參數(shù)表

$("#div1").niceScroll({

????????cursorcolor:?"#424242",?// 改變滾動(dòng)條顏色，使用16進(jìn)制顏色值

????????cursoropacitymin: 0,?// 當(dāng)滾動(dòng)條是隱藏狀態(tài)時(shí)改變透明度, 值范圍 1 到 0

????????cursoropacitymax: 1,?// 當(dāng)滾動(dòng)條是顯示狀態(tài)時(shí)改變透明度, 值范圍 1 到 0

????????cursorwidth:?"5px",?// 滾動(dòng)條的寬度，單位：便素

????????cursorborder:?"1px solid #fff",?// CSS方式定義滾動(dòng)條邊框

????????cursorborderradius:?"5px",?// 滾動(dòng)條圓角（像素）

????????zindex:?"auto",?// 改變滾動(dòng)條的DIV的z-index值（auto或數(shù)字）

????????scrollspeed: 60,?// 滾動(dòng)速度

????????mousescrollstep: 40,?// 鼠標(biāo)滾輪的滾動(dòng)速度 (像素)

????????touchbehavior:?false,?// 激活拖拽滾動(dòng)

????????hwacceleration:?true,?// 激活硬件加速

????????boxzoom:?false,?// 激活放大box的內(nèi)容

????????dblclickzoom:?true,?// (僅當(dāng) boxzoom=true時(shí)有效)雙擊box時(shí)放大

????????gesturezoom:?true,?// (僅 boxzoom=true 和觸屏設(shè)備時(shí)有效) 激活變焦當(dāng)out/in（兩個(gè)手指外張或收縮）

????????grabcursorenabled:?true,?// (僅當(dāng) touchbehavior=true) 顯示“抓住”圖標(biāo)display "grab" icon

????????autohidemode:?true,?// 隱藏滾動(dòng)條的方式, 可用的值如下:

????????/**

??????????true? 無滾動(dòng)時(shí)隱藏

??????????"cursor"? 隱藏

??????????false 不隱藏,

??????????"leave" 僅在指針離開內(nèi)容時(shí)隱藏

??????????"hidden" 一直隱藏

??????????"scroll" 僅在滾動(dòng)時(shí)顯示

????????**/

????????background:?"",?// 軌道的背景顏色

????????iframeautoresize:?true,?// 在加載事件時(shí)自動(dòng)重置iframe大小

????????cursorminheight: 32,?// 設(shè)置滾動(dòng)條的最小高度 (像素)

????????preservenativescrolling:?true,?// 你可以用鼠標(biāo)滾動(dòng)可滾動(dòng)區(qū)域的滾動(dòng)條和增加鼠標(biāo)滾輪事件

????????railoffset:?false,?// 可以使用top/left來修正位置

????????bouncescroll:?false,?// (only hw accell) 啟用滾動(dòng)跳躍的內(nèi)容移動(dòng)

????????spacebarenabled:?true,?// 當(dāng)按下空格時(shí)使頁面向下滾動(dòng)

????????railpadding: { top: 0, right: 0, left: 0, bottom: 0 },?// 設(shè)置軌道的內(nèi)間距

????????disableoutline:?true,?// 當(dāng)選中一個(gè)使用nicescroll的div時(shí)，chrome瀏覽器中禁用outline

????????horizrailenabled:?true,?// nicescroll可以管理水平滾動(dòng)

????????railalign:?"right",?// 對齊垂直軌道

????????railvalign:?"bottom",?// 對齊水平軌道

????????enabletranslate3d:?true,?// nicescroll 可以使用CSS變型來滾動(dòng)內(nèi)容

????????enablemousewheel:?true,?// nicescroll可以管理鼠標(biāo)滾輪事件

????????enablekeyboard:?true,?// nicescroll可以管理鍵盤事件

????????smoothscroll:?true,?// ease動(dòng)畫滾動(dòng)

????????sensitiverail:?true,?// 單擊軌道產(chǎn)生滾動(dòng)

????????enablemouselockapi:?true,?// 可以用鼠標(biāo)鎖定API標(biāo)題 (類似對象拖動(dòng))

????????cursorfixedheight:?false,?// 修正光標(biāo)的高度（像素）

????????hidecursordelay: 400,?// 設(shè)置滾動(dòng)條淡出的延遲時(shí)間（毫秒）

????????directionlockdeadzone: 6,?// 設(shè)定死區(qū)，為激活方向鎖定（像素）

????????nativeparentscrolling:?true,?// 檢測內(nèi)容底部便于讓父級滾動(dòng)

????????enablescrollonselection:?true,?// 當(dāng)選擇文本時(shí)激活內(nèi)容自動(dòng)滾動(dòng)

????????cursordragspeed: 0.3,?// 設(shè)置拖拽的速度

????????rtlmode:?"auto",?// DIV的水平滾動(dòng)從左邊開始

????????cursordragontouch:?false,?// 使用觸屏模式來實(shí)現(xiàn)拖拽

????????oneaxismousemode:?"auto",?// 當(dāng)只有水平滾動(dòng)時(shí)可以用鼠標(biāo)滾輪來滾動(dòng)，如果設(shè)為false則不支持水平滾動(dòng)，如果設(shè)為auto支持雙軸滾動(dòng)

????????scriptpath:?"",?// 為boxmode圖片自定義路徑 ("" => same script path)

????????preventmultitouchscrolling:?true?// 防止多觸點(diǎn)事件引發(fā)滾動(dòng)

????});

原文出自：www.hangge.com??轉(zhuǎn)載請保留原文鏈接：http://www.hangge.com/blog/cache/detail_1931.html

轉(zhuǎn)載于：http://www.hangge.com/blog/cache/detail_1931.html

總結(jié)

以上是生活随笔為你收集整理的jQuery - 滚动条插件 NiceScroll 使用详解（滚动条美化）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：在页面最上面显示当前登陆的状态
下一篇： Redis分布式锁—SETNX+Lua脚