ScrollBar

---

一、主要功能

• 自訂外觀的捲軸（細細的灰色條＋深色滑塊）

• 滑鼠滾輪滑動內容

• 拖曳滑塊改變內容捲動

• 觸控（手機/平板）滑動支援

• 容器尺寸變化、內容變動時自動更新

• 自訂動畫平滑過渡（不是直接跳，會有平滑滑動感）

• 使用 Vanilla.js 完成

---

二、程式結構簡述

主函式 ScrollBar(selector)

• 初始化各種元素（content、scroll、slider...）

• 設定初始樣式 (setCss)

• 監聽不同事件（滾動、拖拉、觸控、視窗大小變化、內容變化）

小功能說明

• getHeight(element)：取得元素高度（純數字）

• setCss(element, css)：修改元素的 style，且保留舊有的 CSS

• sliderHeight()：計算滑塊高度（比例公式）

• contentTopAndSliderTopChange(topValue)：根據內容的滾動位置，同步滑塊的位置

• contentTopAndSliderTopAnimation(state, newContentPosTop)：用 requestAnimationFrame 平滑滑動

• limit(value, min, max)：限制數值在範圍內

• showState(state)：控制捲軸/滑塊是否顯示（內容不滿時隱藏）

• windowSizeChange()：視窗大小改變時，重新計算捲軸

• childChange()：內容有 DOM 變更時（新增、刪除、改文字），重新計算捲軸

• touchEvent()：支援手機觸控滑動

• dragEvent()：支援拖拉滑塊

• wheelEvent()：支援滑鼠滾輪滾動

---

三、Drag 小工具說明

Drag(element) 是一個 自製拖拉功能的物件。

• Draggable.create({...}) 可以指定：

  • 拖拉開始 start

  • 拖拉中 drag

  • 拖拉結束 end

  • 限制軸向：x（水平）、y（垂直）、s（兩個都可以）

裡面會綁定 mousedown / mousemove / mouseup 等事件來做跟隨。

---

四、操作流程（大致順序）

1. 初始化設定高度、樣式

2. 檢查內容高度是否需要捲軸（check）

3. 監聽：

   • 視窗大小改變（resize）

   • 內容變更（MutationObserver）

   • 滑鼠滾輪

   • 滑塊拖拉

   • 手指觸控滑動

4. 根據使用者操作更新內容位置 + 滑塊位置

Demo

• Example 1

• Example 2 - 同一行不同區塊

• Example 3 - 新增內容變化滾輪