ElementUI设置侧边栏滚动

最新推荐文章于 2025-09-24 12:04:07 发布

原创最新推荐文章于 2025-09-24 12:04:07 发布 · 5.9k 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js #css

ElementUI 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用ElementUI的el-scrollbar组件来定制侧边栏的滚动条。通过在外层div设置样式，实现了侧边栏固定在左侧并隐藏横向滚动条，只保留竖向滚动。通过添加`overflow-x:hidden`到`.el-scrollbar__wrap`，成功隐藏了不需要的横向滚动条，保持了界面的整洁。

ElementUI使用el-scrollbar设置侧边栏滚动

使用element的隐藏组件 el-scrollbar

在el-scrollbar外包裹一层div,el-scrollbar需要加上高度，否则无法滚动

<template>
	<div class="side-bar">
        <el-scrollbar style="height: 100%;">
            ...
        </el-scrollbar>
    </div>
</template>

<style lang="scss" scope>
    .side-bar {
        width: 30%;
    }
</style>

大概会是这样子的一个界面

在这里插入图片描述

继续给外层的div添加样式

给一个相对浏览器定位的布局，定位在左侧

<style lang="scss" scope>
    .side-bar {
        width: 30%;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        overflow: hidden;
    }
</style>

会产生这样一个样式

在这里插入图片描述

可以看到滚动条显示出来，竖向滚动条显示的是element的滚动条，而横向的是原生滚动条

隐藏横向滚动条

<style lang="scss" scope>
	.side-bar {
        width: 30%;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        overflow: hidden;
        
        .el-scrollbar__wrap {
            overflow-x: hidden;
        }
    }
</style>