使用 element-ui 隐藏组件 el-scrollbar

优雅的细滚动条

image.png

这是浏览器自带的，原地丑晕

image.png

刚好项目里面一直在使用的都是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>

😄 就是yyds !!!


如果本文对你有帮助的话，请给我点赞打call哦~o(￣▽￣)ｄo
有其他问题留言 over~