关于前端:CSS-实例系列-04-Dropdown-下拉面板

Hello 小伙伴们早上、中午、下午、早晨和深夜好，这里是 jsliang~

今儿要实现的是：Dropdown 下拉面板

本期将和小伙伴们探讨：

• √ 通过精简构造，解说 HTML 和 CSS 搭配如何实现 Dropdown 下拉面板

本实例的代码地址：

• Github – all for one
• 码上掘金 – 04 – Dropdown 下拉面板
• 视频解说

一 前言

本 CSS 系列文章：

1. 主推学以致用 。联合面试题和工作实例，让小伙伴们深刻体验 61 个工作常见的 CSS 属性和各种 CSS 常识。
2. 主推纯 CSS。尽可能应用 HTML + CSS 实现学习目标，但依然有“一小部分”性能须要用到 JavaScript 常识， 适宜新人学习 + 大佬温习 。

如果文章在一些细节上没写分明或者误导读者，欢送评论 / 吐槽 / 批评， 你的点赞、珍藏和关注是我更新的能源 ❤

• 更多常识分享文章可见：jsliang 的文档库

二 本期知识点

2.1 :-webkit-scrollbar

对于 :-webkit-scrollbar，小伙伴们在 MDN 上能够看到介绍：

• :-webkit-scrollbar CSS 伪类元素会影响设置了 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 交互：

1. 鼠标 hover 到【按钮组合】的时候，让它能开展上面的【整体面板区域】，并且 right-btn 这个三角能旋转起来
2. 鼠标 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：

1. 设置 padding-right，但不实用 Dropdown 下拉面板。通过 padding-right: calc(100vw - 100%)，不计算滚动条的地位，原理是 100vw 是绝对于浏览器 window.innerWidth，是浏览器的外部宽度，会将 滚动条宽度计算在内 ，而 100% 并不会（100% 是可用宽度）
2. 设置 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/ 处取得。