使用 element-ui 隐藏组件 el-scrollbar 美化滚动条

最新推荐文章于 2024-09-23 12:22:55 发布

冰眸js

最新推荐文章于 2024-09-23 12:22:55 发布

阅读量563

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/bingmoujs/article/details/130595735

版权

刚好项目里面一直在使用的都是element，因为原生的滚动条太丑了，发现elementui中有个隐藏的组件，就是element官网使用的滚动条，可以优化滚动条样式。亲测可用，鼠标经过的时候才会显示，简单美观。

代码
layout.vue

<template>
    <div class="lay-out">
        <el-scrollbar class="page-scroll">
            <Header></Header>
            <div class="main">
                <router-view />
            </div>
        </el-scrollbar>
    </div>
</template>

<script>
import Header from "./Header";
export default {
    name: "LayOut",
    components: {Header}
}
</script>

<style lang="less" scoped>
.lay-out{
    height: 100vh;  /* 必须给外层设高度 滚动条才会显示 */
    .page-scroll {
        height: 100%;
        /deep/ .el-scrollbar__wrap{
            overflow-x: hidden;  /* 隐藏横向的原生滚动条 */
        }
    }
}
</style>