样式穿透问题

html 复制代码
<el-dropdown
  trigger="click"
  popper-class="custom-more-dropdown-popper" 
  @command="handleMoreCommand"
>
  </el-dropdown>

html 复制代码
<style scoped>
/* ...你之前的样式... */
</style>

<style>
/* 这里不需要 :deep(),因为这是全局样式,
  但我们要通过 .custom-more-dropdown-popper 来限制范围 
*/

.custom-more-dropdown-popper .el-dropdown-menu {
  /* 1. 设置最大高度,超过这个高度会出现滚动条 */
  max-height: 300px; 
  
  /* 2. 开启垂直滚动 */
  overflow-y: auto;
  
  /* (可选) 稍微调整一下内边距,让滚动条不贴着字 */
  padding-right: 5px; 
}

/* (可选) 美化一下滚动条,让它看起来更现代 */
.custom-more-dropdown-popper .el-dropdown-menu::-webkit-scrollbar {
  width: 6px;
}
.custom-more-dropdown-popper .el-dropdown-menu::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}
</style>
相关推荐
我命由我1234515 天前
CSS - CSS 媒体查询 orientation
前端·javascript·css·html·css3·html5·js
feixing_fx18 天前
伪类与伪元素的魔法:纯 CSS 打造炫酷的按钮悬停特效
前端·css·css3
無限進步D21 天前
Java Web 前端 简介
java·开发语言·前端·css·html·css3·web
無限進步D21 天前
VSCode 简介+安装+JavaWeb前端常用插件+简单配置
java·开发语言·css·vscode·html·css3·插件
linsk199824 天前
妙用:focus解决0到auto高度过渡的边界场景
css3
EatFan1 个月前
HTML前端利用flex解决input定位的问题
前端·css·html·css3
平头哥~1 个月前
Day 20 _ 3D 翻卡_perspective 写错人,卡片就穿帮
前端·3d·css3·学习资料
平头哥~1 个月前
Day 21 | animation 与 keyframes:把动画从 A 到 B 变成多点编排
前端·css·css3·css学习
toooooop81 个月前
智慧文旅数字人体验平台demo html
css·css3
神膘护体小月半1 个月前
mask 渐变遮罩属性
前端·css·css3