預設時會是使用瀏覽器定義的 Scrollbar，不過 vogue 有在修改過樣式，所以我們也要跟著改囉！

關於 Scroll Bar

W3 Schools

如何創建自定義滾動條

Chrome、Edge、Safari 和 Opera 支持非標準的::-webkit-scrollbar偽元素，它允許我們修改瀏覽器滾動條的外觀。

透過 -webkit-scrollbar ，我們就能來修改 Scrollbar 的樣式了！

Scrollbar Selectors

我們可以使用以下的選擇器來選擇要修改哪些部分

• ::-webkit-scrollbar：Scrollbar 本身。
• ::-webkit-scrollbar-button：Scrollbar 上的箭頭，可以點按來上下移動的按鈕。
• ::-webkit-scrollbar-thumb：滑鼠所拖動的移動手把。
• ::-webkit-scrollbar-track：Scrollbar 的軌道，就是底下淺淺灰色的那塊。
• ::-webkit-scrollbar-track-piece：Scrollbar 中未被移動手把覆蓋到的區域，跟軌道的設定類似。
• ::-webkit-scrollbar-corner：Scrollbar 左下或右下角，有水平跟垂直 Scrollbar 時交會的點。
• ::-webkit-resizer：交會點可以上下左右移動的按鈕。

大致了解有哪些項目可以設定了，那我們開始實作吧！

因為這個 Scrollbar 的樣式範圍只在 dropdown 中，所以我們就在 _dropdown.sass 中設定，先把寬度條小，調整為 5px，然後加上手把顏色以及軌道底色

// _dropdown.sass

::-webkit-scrollbar
    width: 5px

::-webkit-scrollbar-track
    background: $gray

::-webkit-scrollbar-thumb
    background: $dark-gray

而 $dark-gray 的值設定在 _variable.sass

// _variable.sass

// color
$primary-color: #000
$secondary-color: #EE0000
$primary-background-color: #fff
$gray: #f2f2f2
$dark-gray: #888

就完成了！簡單吧！

除此之外，也歡迎大家走走逛逛關於我們團隊夥伴的文章

lu23770127 - SASS 基礎初學三十天

10u1 - 糟了！是世界奇觀！

juck30808 - Python - 數位行銷分析與 Youtube API 教學

HLD - 淺談物件導向與Design Pattern介紹

SiQing47 - 前端？後端？你早晚都要全端的，何不從現在開始？