實作客製化 ScrollBar，讓 ScrollBar 掌控權回到前端工程師身上
在沒有客製化 ScrollBar 的時候，曾經發生讓我很驚嚇的事情，就是在自己點腦看似完美無缺的畫面，結果到了 window 的電腦就變了，尤其是看到ScrollBar 在 Mac OS 和 window 間真的是差很多的時候，真的原地崩潰！
這次想要實作的是在 KKday 的行動版網頁上會有的 ScrollBar ，其實也是蠻常看到這種呈現方式，但第一次處理到真的覺得很有趣！
先大概介紹一下這次的 HTML 部分：會先用 div 包著整個 Menu，再透過另一個 div 去限制 Menu 的大小，最後才是 Menu 內的各元素，其中因為我是用 Vue 寫的專案，關於 Vue 的語法就會先省略，不然畫面有點亂。
接下來要達成有 scrollbar 的效果，會在 div.menu__wrapper 設定 overflow-x:scroll ，而因為我們這次是水平的 scrollbar ，所以設定overflow-x ，接下來就是設定 scrollbar 樣式囉！
我會用名為webkit-scrollbar 的選擇器來處理 scrollbar 樣式，而 webkit 就是呼叫出一系列並沒正式被 CSS 支援，但能在 Chrome 與 Safari 運作的功能，就像是今天要處理的 scrollbar 就是其中之一，先將放程式碼，接下來再來一步步解釋原理。
-webkit-scrollbar
處理整體 scrollbar 的樣式，我是用來調整 scrollbar 的寬度。
::-webkit-scrollbar-track
處理 scrollbar軌道 (progress bar)，也就是最底層的那塊淺色區域，我處理的是他的圓角以及顏色。
::-webkit-scrollbar-thumb
處理滾動條本身，就是會跟著動的那部分，我處理的是他的圓角以及顏色。
這些都處理完後，畫面長這樣，已經慢慢有雛型了，但是整個 scrollbar 都是貼齊下方且寬度是100%，接下來我們需要處理的共有兩點：
- scrollbar 寬度縮小
- 和最底部有所間隔
1. scrollbar 寬度縮小
這部分我採用的方式是針對 ::-webkit-scrollbar-track 做 margin 調整，就可以達到以下的效果囉！
2. 底部間隔
這部分我真的思考蠻久，一直沒辦法透過 ::-webkit-scrollbar 本身的方法達成，於是我才決定在 .scrollbar 的外層再增加一個 div 透過增加 padding 的方式讓scrollbar 和底部有間隔，如下圖所示綠色部分為 padding：
於是在多重摸索下終於完成啦，直接呈現成品如下，雖然過程找資料花了很多時間，但完成後真的超有成就感，也覺得超美的，又學了一課！
這邊也分享一些當時的參考資料，祝大家都能打造出有風格的Scrollbar囉：
- How TO Custom Scrollbar：https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp
- Custom Scrollbars in WebKit：
https://css-tricks.com/custom-scrollbars-in-webkit/
