本文給大家介紹的nanoScrollerJS是一款使用簡(jiǎn)單方式實(shí)現(xiàn) Mac OS X Lion 系統(tǒng)滾動(dòng)條效果的jQuery插件。該滾動(dòng)條插件利用原生的滾動(dòng)條可以工作在 iPad、iPhone 和一些 Android Tablets上。

網(wǎng)站在展示信息時(shí)，如果信息量過(guò)大，解決方法主要有三種。1.分頁(yè)，將信息分頁(yè)顯示。2.整頁(yè)顯示，但是頁(yè)面過(guò)長(zhǎng)，影響瀏覽體驗(yàn)。3.使用滾動(dòng)條，而默認(rèn)滾動(dòng)條樣式太單一，用戶體驗(yàn)不友好。所以我們需要美化滾動(dòng)條。

美化滾動(dòng)條最簡(jiǎn)單的方式就是使用jquery插件，本文介紹的就是jquery插件中的滾動(dòng)條插件nanoscroller.

官方展示,樣式可自定義

1.nanoscroller插件功能

對(duì)內(nèi)容實(shí)現(xiàn)滾動(dòng)功能

2.nanoscroller官方地址

http://jamesflorentino.github.io/nanoScrollerJS/

3.nanoscroller使用方法

1.引用文件

<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="jquery.nanoscroller.js"></script>
<link rel="stylesheet" href="nanoscroller.css">

2.定義滾動(dòng)條樣式

.nano { background: #bba; width: 500px; height: 500px; font-size:12px;font-family:微軟雅黑;border-radius:8px; }
.nano .content { 
  padding: 20px;
}
.nano .pane {
  background: #555;
  width: 8px;
  right: 1px;
 margin: 5px;
}
.nano .slider {
  background: #111;
}

3.滾動(dòng)顯示的內(nèi)容

<div id="about" class="nano">
 <div class="content"> 
   滾動(dòng)顯示的內(nèi)容
  </div>
</div>

以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章:

相關(guān)文章

用自定義圖片代替原生checkbox實(shí)現(xiàn)全選,刪除以及提交的方法
下面小編就為大家?guī)?lái)一篇用自定義圖片代替原生checkbox實(shí)現(xiàn)全選,刪除以及提交的方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-10-10
jQuery+ajax實(shí)現(xiàn)局部刷新的兩種方法
在項(xiàng)目中，經(jīng)常會(huì)用到ajax，比如實(shí)現(xiàn)局部刷新，比如需要前后端交互等，這里呢分享局部刷新的兩種方法，主要用的是ajax里面的.load()。感興趣的朋友一起看看吧
2017-06-06
jQuery中DOM節(jié)點(diǎn)的刪除方法總結(jié)（超全面）
這篇文章主要介紹了jQuery中DOM節(jié)點(diǎn)的刪除方法,文中介紹的很相信，內(nèi)容包括empty()的基本用法、remove()的有參用法和無(wú)參用法、empty和remove區(qū)別、保留數(shù)據(jù)的刪除操作detach()以及detach()和remove()區(qū)別，需要的朋友可以參考借鑒。
2017-01-01
jQuery實(shí)現(xiàn)遮罩層登錄對(duì)話框
用戶登錄是許多網(wǎng)站必備的功能。有一種方式就是不管在網(wǎng)站的哪個(gè)頁(yè)面，點(diǎn)擊登錄按鈕就會(huì)彈出一個(gè)遮罩層，顯示用戶登錄的對(duì)話框。本文將推薦一個(gè)帶二維碼的登錄彈出層，可拖動(dòng)、關(guān)閉，有需要的朋友可以參考一下。
2016-12-12
jQuery+ajax讀取json數(shù)據(jù)并按照價(jià)格排序示例
這篇文章主要介紹了jQuery+ajax讀取json數(shù)據(jù)并按照價(jià)格排序,涉及jQuery基于ajax動(dòng)態(tài)獲取json文件數(shù)據(jù)并進(jìn)行數(shù)據(jù)遍歷與排序的相關(guān)操作技巧,需要的朋友可以參考下
2018-03-03
jQuery日程管理插件fullcalendar使用詳解
這篇文章主要介紹了jQuery日程管理插件fullcalendar使用方法，整合農(nóng)歷節(jié)氣和節(jié)日，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-01-01
JQuery自定義模態(tài)框效果
這篇文章主要為大家詳細(xì)介紹了JQuery自定義模態(tài)框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
jQuery Easyui實(shí)現(xiàn)左右布局
jQuery EasyUI 是一個(gè)基于 jQuery 的框架，集成了各種用戶界面插件。接下來(lái)通過(guò)本文給大家介紹jQuery Easyui實(shí)現(xiàn)左右布局，涉及到到easyui左右布局相關(guān)知識(shí)，感興趣的朋友一起學(xué)習(xí)吧
2016-01-01
jQuery實(shí)現(xiàn)滑動(dòng)頁(yè)面固定頂部顯示(可根據(jù)顯示位置消失與替換)
這篇文章主要介紹了jQuery實(shí)現(xiàn)滑動(dòng)頁(yè)面固定頂部顯示,還可根據(jù)顯示位置消失與替換對(duì)應(yīng)的當(dāng)前顯示項(xiàng),具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-10-10
淺談jQuery雙事件多重加載的問(wèn)題
下面小編就為大家?guī)?lái)一篇淺談jQuery雙事件多重加載的問(wèn)題。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-10-10