jquery滾動條插件nanoscroller的應用

默認的滾動條的樣式,各個版本的兼容性不是很好, 推薦一款jQuery 插件nanoscroller ,能夠自定義滾動條的樣式。javascript

應用:css

1.引入樣式 nanoscroller.csshtml

<link rel="stylesheet" href="nanoscroller.css">java

在頁面中自定義滾動條的樣式jquery

自定義的樣式以下圖所示:spa

 

2.兩個js文件,一個jQuery庫,一個jquery.nanoscroller.js.net

<script src="jquery-3.2.1.min.js"></script>
<script src="nanoScroller.js"></script>插件

頁面中必須默認啓動滾動js代碼:3d

控件內部默認的在某個節點下查詢:以下圖所示htm

 

3:html 必須有個大的div類名爲nano 包裹 小的類名爲nano-content的div

<div id="about" class="nano"> <div class="nano-content"> ... content here ... (滾動條的內容部分) </div> </div>
相關文章
相關標籤/搜索