如何关闭elementUI左侧aside的滚动条？

Z时代
2024-02-21
分类：IT

展开左侧导航菜单时太高了出现了Y滚动条，浏览器自带的滚动条太丑，后来用<el-scrollbar>标签包裹，结果x和y轴都出现了滚动条，但是x滚动条还是浏览器样式而且不能滚动，css样式里加了overflow-x: hidden;隐藏不了

<el-container style="height: 100%">
                    <el-aside :width="isCollapse?'64px':'200px'">
                        <el-scrollbar>
                            <el-menu
                                    background-color="#333744"
                                    text-color="#fff"
                                    active-text-color="#ffd04b"
                                    :collapse="isCollapse"
                                    :collapse-transition="false"
                                    :unique-opened="true">
                                <el-submenu :index="item.id+''" v-for="item in menuList" :key="item.id" style="text-align: left">
                                    <template slot="title">
                                        <i :class="icons[item.id]"></i>
                                        <span style="text-align: left">{{item.name}}</span>
                                    </template>
                                    <el-menu-item :index="subItem.id+''" v-for="subItem in item.children" :key="subItem.id">
                                        <i class="el-icon-menu"></i>
                                        {{subItem.name}}
                                    </el-menu-item>
                                </el-submenu>
                            </el-menu>
                        </el-scrollbar>
                    </el-aside>
                <el-main>Main</el-main>            </el-container>

.el-aside {
        height: 100%;
        background-color: #333744;
        color: #333;
        text-align: center;
        line-height: 200px;
        .el-menu {
            border-right: none;
        }
    },
.el-scrollbar{
        height:100%;    }