jQuery滾動條插件nanoscroller使用指南
網(wǎng)站在展示信息時,如果信息量過大,解決方法主要有三種。1.分頁,將信息分頁顯示。2.整頁顯示,但是頁面過長,影響瀏覽體驗。3.使用滾動條,而默認(rèn)滾動條樣式太單一,用戶體驗不友好。所以我們需要美化滾動條。
美化滾動條最簡單的方式就是使用jquery插件,本文介紹的就是jquery插件中的滾動條插件nanoscroller.
官方展示,樣式可自定義

1.nanoscroller插件功能
對內(nèi)容實(shí)現(xiàn)滾動功能
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.定義滾動條樣式
.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.滾動顯示的內(nèi)容
<div id="about" class="nano"> <div class="content"> 滾動顯示的內(nèi)容 </div> </div>
以上所述就是本文的全部內(nèi)容了,希望大家能夠喜歡。
- jQuery中Nicescroll滾動條插件的用法
- jquery插件jquery.nicescroll實(shí)現(xiàn)圖片無滾動條左右拖拽的方法
- jQuery niceScroll滾動條錯位問題的解決方法
- jquery滾動條插件jScrollPane的使用介紹
- 學(xué)習(xí)使用jquery iScroll.js移動端滾動條插件
- jquery滾動條插件slimScroll使用方法
- jQuery iScroll.js 移動端滾動條美化插件
- jquery自定義滾動條插件示例分享
- jquery滾動條插件(可以自定義)
- jQuery leonaScroll 1.1 自定義滾動條插件(推薦)
- jQuery滾動條美化插件nicescroll簡單用法示例
相關(guān)文章
用自定義圖片代替原生checkbox實(shí)現(xiàn)全選,刪除以及提交的方法
下面小編就為大家?guī)硪黄米远x圖片代替原生checkbox實(shí)現(xiàn)全選,刪除以及提交的方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
jQuery+ajax實(shí)現(xiàn)局部刷新的兩種方法
在項目中,經(jīng)常會用到ajax,比如實(shí)現(xiàn)局部刷新,比如需要前后端交互等,這里呢分享局部刷新的兩種方法,主要用的是ajax里面的.load()。感興趣的朋友一起看看吧2017-06-06
jQuery中DOM節(jié)點(diǎn)的刪除方法總結(jié)(超全面)
這篇文章主要介紹了jQuery中DOM節(jié)點(diǎn)的刪除方法,文中介紹的很相信,內(nèi)容包括empty()的基本用法、remove()的有參用法和無參用法、empty和remove區(qū)別、保留數(shù)據(jù)的刪除操作detach()以及detach()和remove()區(qū)別,需要的朋友可以參考借鑒。2017-01-01
jQuery+ajax讀取json數(shù)據(jù)并按照價格排序示例
這篇文章主要介紹了jQuery+ajax讀取json數(shù)據(jù)并按照價格排序,涉及jQuery基于ajax動態(tài)獲取json文件數(shù)據(jù)并進(jìn)行數(shù)據(jù)遍歷與排序的相關(guān)操作技巧,需要的朋友可以參考下2018-03-03
jQuery Easyui實(shí)現(xiàn)左右布局
jQuery EasyUI 是一個基于 jQuery 的框架,集成了各種用戶界面插件。接下來通過本文給大家介紹jQuery Easyui實(shí)現(xiàn)左右布局,涉及到到easyui左右布局相關(guān)知識,感興趣的朋友一起學(xué)習(xí)吧2016-01-01
jQuery實(shí)現(xiàn)滑動頁面固定頂部顯示(可根據(jù)顯示位置消失與替換)
這篇文章主要介紹了jQuery實(shí)現(xiàn)滑動頁面固定頂部顯示,還可根據(jù)顯示位置消失與替換對應(yīng)的當(dāng)前顯示項,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10

