样式穿透问题

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>
相关推荐
志尊宝2 天前
Vue3 环境搭建 + 第一个 HelloVue 项目(零基础入门)
vue.js·node.js·vue·css3
More more2 天前
纯手搓css样式:科技感弹窗边框
css·科技·css3
丨我是张先生丨3 天前
英语单词 Web Page
前端·css·css3
丨我是张先生丨5 天前
日语单词 Web Page
前端·css·css3
AI视觉网奇25 天前
three教学 3d资产拼接源代码
前端·css·css3
神明不懂浪漫1 个月前
【第三章】CSS(一)——基础选择器、CSS的属性
前端·css·html·css3
智码看视界1 个月前
老梁聊全栈:CSS3 高级特性—Flex/Grid 布局体系深度解析
前端·css3·布局·flexbox·grid·工程实践·全栈工程师
gz-郭小敏1 个月前
优化横向滚动展示大量数据的时候数据晃动问题
前端·javascript·html·css3
贩卖黄昏的熊1 个月前
flex 布局快速梳理
开发语言·javascript·css3·html5
川冰ICE1 个月前
JavaScript实战④|天气查询应用,调用API与异步处理
javascript·css·css3