默認的滾動條的樣式,各個版本的兼容性不是很好, 推薦一款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>