样式穿透问题

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>
相关推荐
Pilot-HJQ2 天前
固定 Element UI 表格表头的方法(超简单)
vue.js·学习·css3·html5
kilito_013 天前
数字时钟翻页效果
javascript·css·css3
码客前端4 天前
理解 Flex 布局中的 flex:1 与 min-width: 0 问题
前端·css·css3
程序员小李白4 天前
弹性盒子详细解析
前端·css·css3
Komorebi゛4 天前
【CSS】线性流动边框样式
前端·css·css3
be or not to be4 天前
CSS 背景(background)系列属性
前端·css·css3
.又是新的一天.4 天前
【前端Web开发HTML5+CSS3+移动web视频教程】01 html- 标签之文字排版、图片、链接、音视频
前端·css3·html5
lcc1876 天前
CSS3 伸缩盒模型
css3
hxjhnct6 天前
响应式布局有哪些?
前端·html·css3
梦6507 天前
【前端实战】图片元素精准定位:无论缩放,元素始终钉在指定位置
前端·html·css3