各位小伙伴们好，早上，中午，下午，晚上，深夜，这里是jsliang~今天要实现的是：Dropdown下拉面板这个问题会和大家一起讨论网友：√讲解如何结合HTML和CSS，通过简化结构实现Dropdown下拉面板。结合面试题和工作实例，让小伙伴们深度体验61个常用CSS属性和各种CSS知识。主要是纯CSS。尽量使用HTML+CSS来完成学习目的，但是还有“一小部分”功能需要JavaScript知识，适合新手学习+高手复习。如果文章在某些细节上写的不够清楚或者误导了读者，欢迎评论/吐槽/批评，你们的点赞、收藏和关注是我更新2.1的动力：-webkit-scrollbar关于：-webkit-scrollbar，小伙伴们可以参见MDN上的介绍：:-webkit-scrollbarCSS伪类元素会影响设置了overflow:scroll的元素的滚动条样式，匹配本系列伪元素选择器，我们可以修改基于Webkit的浏览器的滚动条样式。2.2overflow:overlay关于overflow知识点，小伙伴们可以在MDN上看到：overflow是CSS的一个简写属性，它设置了元素溢出时想要的行为——也就是当元素的内容太大放不下时在这项目中，我们使用了块级格式化上下文：overflow:scroll:设置超出内容后的滚动效果overflow:overlay:行为与auto相同，只是滚动条绘制在内容之上，而不是占用空间但是overflow:overlay在MDN上已经被标记为obsolete，所以使用时请注意。三个实现步骤OK，开始玩吧。对于Dropdown下拉面板，我们拆解后实际实现的效果如下：3.1HTML结构划分那么，收到这种UI稿后，我们可以拍拍脑袋，整合HTML结构：这里是对应的CSSHTML结构交互：当鼠标悬停到【按钮组合】时，可以展开下方的【整体面板区域】，右btn三角可以旋转。当鼠标悬停到【OverallPanelArea】时，会出现一个滚动条，可以上下滚动，这样我们就可以看到下面的CSS在做什么。3.2第一部分CSS结构划分，实现整体下拉菜单布局，完成【按钮组合区域】。这样我们就可以在鼠标悬停的时候有一个动画，显示【整体面板区域】。第二部分实现【整体面板区域】第三部分实现鼠标悬停时的滚动条效果，改造滚动条实现滚动条。其实还需要配合【滚动内容区域】的设置：.function-container{display:flex;弹性方向：列；填充：012px12px12px；高度：300px；/*向后兼容*/overflow-y:scroll;溢出-y：覆盖；高度不够的时候出现滚动条，因为下拉面板的高度是要尽量动态适应的。例如，当高度小于400px时，出现垂直滚动条；当高度大于400px且足够存储时，不出现滚动条，有无滚动条，overflow:scroll都不足以满足场景——毕竟占用了17px的滚动条宽度！跟你说个冷笑话，都2022年了，对于下拉面板，真的一时半会儿没找到合适的解决方案。根据网上的CSS方法，大致有2种：设置padding-right，但是不适用于Dropdown下拉面板。通过padding-right:calc(100vw-100%)，不计算滚动条的位置。原理是100vw是相对于浏览器的window.innerWidth，是浏览器的内部宽度，滚动条的宽度会被包括在内，而100%则不（100%是可用宽度）设置溢出：覆盖，但不适用于低版本浏览器。具体影响可以看caniuse.com-CSSoverflow:overlay所以，包括我项目上的代码，这个问题还没有解决。这个时候我就纠结了，是不是只能通过JS模拟滚动条来实现我的要求。但是这个话题不想对JavaScript做太多的解释。所以jsliang的解决办法是加上overflow:scroll和overflow:overlay，能看到就看，看不到就计算一下~这样我们hover的时候，滚动条就可以了出来，但是当它不是悬停时，它不会出来滚动条。查看最终代码效果：Github-allforoneCodeNuggets-04-Dropdown下拉面板4ReferencesZhangXinxu-小提示：CSSvwmakeoverflow:autopagescrollbarnotjumpwhenitappearsMenqq-CSDN-Scrollbardoes不占空间overlay属性caniuse.com-CSSoverflow:overlay前端开发博客-3种实现CSS隐藏滚动条并且可以滚动内容的方法Microsoft-在Chrome,IE(6+),Firefox,中用纯CSS隐藏垂直滚动条,Opera，和SafariB威少维-博客园-滚动条出现挤压页面宽度，影响前端布局不用折腾，咸鱼有什么区别！觉得文章不错的朋友欢迎点赞/star。如需联系jsliang：Github掘金个人联系方式保存在Github主页，欢迎一起折腾~努力把自己打造成一个充满探索欲、喜欢折腾、乐于折腾的终身学习斜杠程序员扩展你的知识。jsliang的文档库由JunrongLiang根据CreativeCommonsAttribution-NonCommercial-ShareAlike4.0InternationalLicense授权。
基于https://github.com/LiangJunrong/document-library上的作品。
非本许可协议授权的使用权可从https://creativecommons.org/licenses/by-nc-sa/2.5/cn/获取。
