jquery捲軸外掛程式nanoscroller的應用

標籤：asc   sdn   class   base   mic   images   節點   htm   相容   

預設的捲軸的樣式，各個版本的相容性不是很好， 推薦一款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的應用