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