【Web】Custom Scrollbar - 3：推薦使用 OverlayScrollbars

tags: Javascript Scrollbar

• 來源：https://kingsora.github.io/OverlayScrollbars/#!themes

Common 前言

1. 上次那篇所使用的Scrollbar，後來有發現其他的BUG，故只好又重新找一個Scrollbar
2. 會想替換掉舊的NiceScroll的主要原因是它不是直接替換原生的scrollbar，而是重新再生成一個，且位置、高度、寬度都是靠library本身計算而得，所以有library作者沒考慮到的情況會造成BUG
3. NiceScroll很多瀏覽器預設的scrollbar行為都沒有考慮到，所以必須找一個不是重新生成scrollbar，且是直接替換原生的scrollbar的library
4. 當切換頁面時，NiceScroll隱藏舊的scrollbar並不是destroy，所以其實體會無限的在網頁上生成
5. 當時在測試時，也有測試Simplebar這個library，但靈活度及文件完整度實在是遠不及OverlayScrollbars，所以最後選擇了OverlayScrollbars

OverlayScrollbars 簡介

• 以下皆以 jQuery 說明

和其他 Scrllbar 比較表

• 來源：https://kingsora.github.io/OverlayScrollbars/#!faq

HOW TO USE 如何實現

• Library Download
• import

<!-- Plugin CSS -->
<link type="text/css" href="path/to/OverlayScrollbars.css" rel="stylesheet"/>
<!-- jQuery JS -->
<script type="text/javascript" src="path/to/jquery.js"></script>
<!-- Plugin JS -->
<script type="text/javascript" src="path/to/jquery.overlayScrollbars.js"></script>

• initial

$(function() {
    //The passed argument has to be at least a empty object or a object with your desired options
    $("body").overlayScrollbars({ });
});

常用參數

• className：scrollbar 顏色
  • null
  • os-theme-dark (default)
  • os-theme-light
• autoUpdate
  • null (default)
  • true/false
• autoUpdateInterval

---

• 因為scrollbar本身行為就是瀏覽器預設行為，幾乎不需要自行調整參數
• 其他參數

常用方法

• sleep
• update：手動更新

Example 範例

1. 一般元件的scrollbar
   • 若背景是淺色系，則用預設 'os-theme-dark'
   • 若背景是淺色系，則用 'os-theme-light'

$('#test').overlayScrollbars({ 
    className: 'os-theme-light'
});

2. 手動更新 TextArea
   • 若 TextArea 內容改變時，其寬高不會隨之改變

let instance = $('#test').overlayScrollbars();
instance.sleep();
instance.update();

Testing 測試中

• 還在測試能否只更換scrollbar的樣式，而不生成其他的東西
  • 1個div，多出了許多library產生的元件

Reference 參考資料

1. OverlayScrollbars 官方文件
2. OverlayScrollbars Github
3. 巴哈 - 網頁自訂滾動條scrollbar