jQuery – 在手機依然可以顯示的 Scroll 的捲軸外掛

目前在行動裝置上的 Google Chrome 捲軸,一旦停止滑動以後就會暫時隱藏,直到下次移動的時候才會顯示。但如果需要讓捲軸一直出現而不暫時消失的話,就要透過套件來模擬。

我們使用 jquery.scrollbar

安裝很簡單,下載 後指定 JS 與 CSS 路徑

<script src="bower_components/jquery.scrollbar/jquery.scrollbar.min.js"></script>
<link rel="stylesheet" href="bower_components/jquery.scrollbar/jquery.scrollbar.css">

jQuery 這麼寫就可以了

$('.scrollbar-outer').scrollbar();

務必指定 jquery.scrollbar 所提供的 Class 名稱,我喜歡使用 .scrollbar-outer 是因為捲軸不會擋到內部文字,其他樣式的 Class 名稱可以參考這裡

Comments

  1. 請問此方法對於grid裡的scrollbar也有效?
    目前在手機瀏覽器,裡面有grid元件,希望能顯示scrollbar ,方便USER操作。
    謝謝

發表迴響