jquery滾動條插件nanoscroller的應用
阿新 • • 發佈:2017-09-03
o-c lan lac size nbsp 查詢 get rep ...
默認的滾動條的樣式,各個版本的兼容性不是很好, 推薦一款jQuery 插件nanoscroller ,可以自定義滾動條的樣式。
應用:
1.引入樣式 nanoscroller.css
<link rel="stylesheet" href="nanoscroller.css">
在頁面中自定義滾動條的樣式
自定義的樣式如下圖所示:
2.兩個js文件,一個jQuery庫,一個jquery.nanoscroller.js
<script src="jquery-3.2.1.min.js"></script>
<script src="nanoScroller.js"></script>
頁面中必須默認啟動滾動js代碼:
控件內部默認的在某個節點下查詢:如下圖所示
3:html 必須有個大的div類名為nano 包裹 小的類名為nano-content的div
<div id="about" class="nano">
<div class="nano-content"> ... content here ... (滾動條的內容部分) </div>
</div>
jquery滾動條插件nanoscroller的應用