Hello 小夥伴們早上、中午、下午、晚上和深夜好，這裏是 jsliang~
今兒要實現的是：Dropdown 下拉麪板
本期將和小夥伴們探討：
- √ 通過精簡結構，講解 HTML 和 CSS 搭配如何實現 Dropdown 下拉麪板
本實例的代碼地址：
- Github - all for one
- 碼上掘金 - 04 - Dropdown 下拉麪板
- 視頻講解
一 前言
本 CSS 系列文章：
- 主推學以致用。結合面試題和工作實例，讓小夥伴們深入體驗 61 個工作常見的 CSS 屬性和各種 CSS 知識。
- 主推純 CSS。儘可能使用 HTML + CSS 完成學習目的，但仍然有 “一小部分” 功能需要用到 JavaScript 知識，適合新人學習 + 大佬複習。
如果文章在一些細節上沒寫清楚或者誤導讀者，歡迎評論/吐槽/批判，你的點贊、收藏和關注是我更新的動力 ❤
- 更多知識分享文章可見：jsliang 的文檔庫
二 本期知識點
2.1 :-webkit-scrollbar
關於 :-webkit-scrollbar，小夥伴們在 MDN 上可以看到介紹：
:-webkit-scrollbarCSS 偽類元素會影響設置了overflow:scroll的元素的滾動條樣式
配合這一系列偽元素選擇器，我們可以修改基於 Webkit 瀏覽器的滾動條樣式。
2.2 overflow: overlay
關於 overflow 知識點，小夥伴們可以在 MDN 上看到：
overflow是 CSS 的簡寫屬性，其設置了元素溢出時所需的行為 —— 即當元素的內容太大而無法適應它的塊級格式化上下文時
在本項目中，我們使用到了：
overflow: scroll：超出內容後，設置滾動效果overflow: overlay：行為與auto相同，但是滾動條繪製在內容之上，而不是佔據空間
但是 overflow: overlay 在 MDN 上已標記廢置了，所以小夥伴們使用的時候注意下。
三 實現步驟
OK，下面我們開始玩轉起來。
對於 Dropdown 下拉麪板，我們實際達成的效果，拆解後是這樣的：
3.1 HTML 結構劃分
所以，接到這種 UI 稿，我們可以拍腦袋瓜，把 HTML 結構整起來：
這裏面 HTML 結構對應的 CSS 交互：
- 鼠標 hover 到【按鈕組合】的時候，讓它能展開下面的【整體面板區域】，並且
right-btn這個三角能旋轉起來 - 鼠標 hover 到【整體面板區域】的時候，出現滾動條，並且能上下滾動
這樣我們就清楚下面 CSS 怎麼做了。
3.2 CSS 結構劃分
第一部分，實現總體下拉菜單佈局，並且完成【按鈕組合區域】。
這樣我們就能在鼠標 hover 的時候，有一個動畫存在，並且顯示【整體面板區域】。
第二部分，實現【整體面板區域】
第三部分，實現鼠標 hover 進去出現滾動條效果，並且改造滾動條
這個滾動條的實現，其實還需要配合【滾動內容區域】的設置：
.function-container {
display: flex;
flex-direction: column;
padding: 0 12px 12px 12px;
height: 300px;
/* 向下兼容 */
overflow-y: scroll;
overflow-y: overlay;
}3.3 overflow 問題探索
在解決下拉麪板在高度不夠出現滾動條的時候，因為下拉麪板的高度是儘可能希望動態適應的，例如：
- 在高度小於 400px 的時候，出現縱向滾動條
- 在高度大於 400px 且足夠存放的時候，不出現滾動條
這時候，有滾動條和無滾動條情況下，對於 overflow: scroll 就不太能滿足場景了 —— 它畢竟要佔據 17px 的滾動條寬度的！
講個冷笑話，都 2022 年了，對於下拉麪板，我還真一時半會沒找到合適的方案，看網上的 CSS 方式大致有 2：
- 設置
padding-right，但不適用 Dropdown 下拉麪板。通過padding-right: calc(100vw - 100%)，不計算滾動條的位置，原理是100vw是相對於瀏覽器window.innerWidth，是瀏覽器的內部寬度，會將 滾動條寬度計算在內，而100%並不會（100%是可用寬度） - 設置
overflow: overlay，但不適用於低版本瀏覽器。具體的影響可以看 caniuse.com - CSS overflow: overlay
所以，包括我項目上的代碼，就還沒解決這個問題。
這時候我就在糾結了，是不是隻能通過 JS 模擬滾動條，來實現我的要求。
但是本主題並不想過多講解 JavaScript 相關內容。
所以 jsliang 的解決方案是添加 overflow: scroll 和 overflow: overlay，能看就看，不能就計算~
這樣子我們就做到了 hover 的時候，滾動條能隨之出來，而不 hover 的時候，就不出來滾動條。
最終代碼效果查看：
- Github - all for one
- 碼上掘金 - 04 - Dropdown 下拉麪板
四 參考文獻
- 張鑫旭 - 小tip:CSS vw讓overflow:auto頁面滾動條出現時不跳動
- Menqq - CSDN - 滾動條不佔位 overlay屬性
- caniuse.com - CSS overflow: overlay
- 前端開發博客 - 3種方法實現CSS隱藏滾動條並可以滾動內容
- Microsoft - Hiding Vertical Scrollbars with Pure CSS in Chrome, IE (6+), Firefox, Opera, and Safari
- BWestbrook維 - 博客園 - 滾動條出現擠壓頁面寬度，影響佈局
不折騰的前端，和鹹魚有什麼區別！
覺得文章不錯的小夥伴歡迎點贊/點 Star。
如果小夥伴需要聯繫 jsliang：
- Github
- 掘金
個人聯繫方式存放在 Github 首頁，歡迎一起折騰~
爭取打造自己成為一個充滿探索欲，喜歡折騰，樂於擴展自己知識面的終身學習斜槓程序員。
jsliang 的文檔庫由 梁峻榮 採用 知識共享 署名-非商業性使用-相同方式共享 4.0 國際 許可協議 進行許可。<br/>基於 https://github.com/LiangJunrong/document-library 上的作品創作。<br/>本許可協議授權之外的使用權限可以從 https://creativecommons.org/licenses/by-nc-sa/2.5/cn/ 處獲得。
