el-dropdown-menu 添加滚动轴

最新推荐文章于 2025-03-19 16:55:16 发布

qq_41562817

最新推荐文章于 2025-03-19 16:55:16 发布

阅读量1.1k

点赞数

分类专栏：组件库文章标签： css vue.js

本文链接：https://blog.csdn.net/qq_41562817/article/details/131785552

版权

组件库专栏收录该内容

5 篇文章

订阅专栏

本文介绍了在VueElementUI的el-dropdown组件中，如何在设置了高度限制和溢出情况下添加滚动轴的问题，提供了CSS代码示例，包括如何自定义滚动轴的宽度、滑道和滑块样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景：使用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;
  }