DAY 20 制作 Nav Bar - Scrollbar

预设时会是使用浏览器定义的 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 - 前端？後端？你早晚都要全端的，何不从现在开始？