隐藏 elementUI el-menu导航菜单出现的滚动条

在工作中左侧菜单栏如果高度超出屏幕范围，就会生成滚动条。但是生成的滚动条又不美观。怎么样才能在不影响滚动的情况下实现隐藏滚动条。

问了下GPT我也确实解决了主要是使用css中的代码

<template>
  <div class="menu-container">
    <el-menu
      class="el-menu"
      default-active="1"
      style="height: 200px; overflow-y: auto;"
      router>
      <el-menu-item index="1">Option 1</el-menu-item>
      <el-menu-item index="2">Option 2</el-menu-item>
      <el-menu-item index="3">Option 3</el-menu-item>
      <el-menu-item index="4">Option 4</el-menu-item>
      <el-menu-item index="5">Option 5</el-menu-item>
      <el-menu-item index="6">Option 6</el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 菜单数据等
    };
  },
};
</script>

<style>
/*对一些浏览器的支持*/
.el-menu {
  overflow: -moz-scrollbars-none;  /* Firefox */
  -ms-overflow-style: none;        /* Internet Explorer 10+ */
  scrollbar-width: none;           /* Firefox */
}
/*找到滚动条在谁身上 设置下面的属性*/
.el-menu::-webkit-scrollbar {
  display: none;  /* Chrome, Safari, Opera */
}
</style>

说明

• scrollbar-width: none;：用于 Firefox 浏览器，隐藏滚动条但保留滚动功能。
• -ms-overflow-style: none;：用于 Internet Explorer 浏览器，隐藏滚动条。
• overflow-y: auto;：确保 el-menu 在内容溢出时仍然可以滚动。

注意事项

• 浏览器兼容性：上面的代码应该在大多数现代浏览器中有效。如果你需要支持较旧的浏览器，可能需要额外的处理。
• 用户体验：隐藏滚动条可能会影响用户体验，特别是如果用户不习惯使用鼠标滚轮或触摸板来滚动内容。因此，确保用户能够轻松地浏览内容是很重要的。

通过这种方式，你可以隐藏 el-menu 的滚动条，同时保留其滚动功能，提供更整洁的界面外观。