跳到主要內容

範例 - JavaScript 實作 Excel 頁籤移動元件

最近想調整之前做的在有限空間內的選單內容切換元件
參考的項目來源則是Excel的下方頁籤選擇器
Excel這類廣泛使用的軟體,設計都還滿值得參考的
一方面是Microsoft將它做得滿直覺的
另一方面則是一般大眾也被訓練到能接受它的操作流程

實作的成果如下:


點擊下一項時,選單容器會自動往右邊捲動一個不定長度的子元件的距離
長按著下一項按鈕不放,則會持續往右捲動到底

程式碼如下


透過requestAnimationFrame避免動畫進行時碰到掉幀
這樣就是一段很流暢的移動效果了

留言