el-dropdown-menu 添加滚动轴

背景:使用el-dropdown下拉菜单时,发现el-dropdown-menu 在设置高度和溢出的情况下仍无法添加滚动轴。

方法也可在普通盒子上生效

​​​​​​​​​​​​​​

1、添加滚动轴

  .el-dropdown-menu {
    overflow: auto; // 添加滚动条
    max-height: 50px; // 最大高度
    overflow-x: hidden; // 隐藏x轴上的滚动条
  }

 2、自定义样式

  .el-dropdown-menu::-webkit-scrollbar {
    width: 5px; // 设置滚动轴宽度
    background-color: #f5f5f5;
  }
  .el-dropdown-menu::-webkit-scrollbar-track {
    //覆盖滑道样式
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: #f5f5f5;
  }

  .el-dropdown-menu::-webkit-scrollbar-thumb {
    //覆盖滑块样式
    background-color: #ff0000;
    border-radius: 3px;
  }
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要使el-dropdown-menu在展开时出现滚动条,可以根据以下方法进行设置: 1. 添加以下CSS样式到.el-dropdown-menu类中: ```css .el-dropdown-menu { overflow: scroll; // 添加滚动条 max-height: 200px; // 最大高度 overflow-x: hidden; // 隐藏x上的滚动条 } ``` 这样,当el-dropdown-menu的内容超过最大高度时,将显示滚动条。 2. 如果你使用的是Element Plus框架中的原生dropdown组件,可以复制一个dropdown组件的代码,并根据需要进行修改。在复制的代码中,可以将.el-dropdown-menu添加到需要显示滚动条的地方,然后再进行样式设置。 3. 另外,你还可以根据需要设置el-dropdown-menu高度滚动条样式。例如,可以添加以下CSS样式到.project-dropdown类中: ```css .project-dropdown { height: 300px; // 设置高度才能显示出滚动条 overflow: auto; } .project-dropdown::-webkit-scrollbar { width: 5px; height: 5px; background-color: #F5F5F5; } .project-dropdown::-webkit-scrollbar-track { border-radius: 10px; background-color: #F5F5F5; } ``` 这样,el-dropdown-menu在展开时将出现滚动条,并且滚动条的样式也会被设置。 通过以上方法,你可以实现el-dropdown-menu在展开时出现滚动条,并且可以根据需要进行样式设置。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [Element-UI Plus 给el-dropdown添加滚动条效果](https://blog.csdn.net/RRRRRRichard/article/details/123209821)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [Element-UI 给el-dropdown添加滚动条](https://blog.csdn.net/ddk54321/article/details/89083335)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值