element的隐藏组件滚动条el-scrollbar使用亲测有用~

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

jcat_李小黑

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

阅读量5w

点赞数 45

分类专栏： ElementUI 文章标签： element 滚动条前端

本文链接：https://blog.csdn.net/weixin_43216105/article/details/89520534

版权

ElementUI 专栏收录该内容

12 篇文章 14 订阅

订阅专栏

前言

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

正文

首先全局引入element，import ElementUI from 'element-ui';

简单使用–只是用竖的滚动条
只是用竖的滚动条，外层box设置宽高，内层的内容充满，设置el-scrollbar的高度。
重要代码：.el-scrollbar__wrap { overflow: scroll; width: 110%; height: 120%; } ，为什么要设置这个宽和高呢？因为：为了把原生的滚动条挤到看不到地方！！这是很重要的。没有这个代码，竖滚动条显示正常，可横向会和原生的滚动条重合。

<template>
    <div>
        <div class="box">
            <el-scrollbar>
                <p>刚好项目里面一直在使用的都是element</p>
                <p>因为原生的滚动条太丑了</p>
                <p>发现elementui中有个隐藏的组件</p>
                <p>优化滚动条样式</p>
                <p>亲测可用</p>
            </el-scrollbar>
        </div>
    </div>
</template>
<style>
    .box {
        width: 200px;
        height: 100px;
        background: aliceblue;
    }

    .el-scrollbar {
        height: 100%;
    }
    .el-scrollbar__wrap {
        overflow: scroll;
        width: 110%;
        height: 120%;
    }
</style>

使用横向和竖向的滚动条
让外层盒子的内容不换行white-space: nowrap;，其他代码相同。这个情况也适用与内部是ul，li，table等比较复杂的情况。

<template>
    <div>
        <div class="box">
            <el-scrollbar>
                <p>刚好项目里面一直在使用的都是element</p>
                <p>因为原生的滚动条太丑了</p>
                <p>发现elementui中有个隐藏的组件</p>
                <p>优化滚动条样式</p>
                <p>亲测可用</p>
            </el-scrollbar>
        </div>
    </div>
</template>
<style>
    .box {
        width: 200px;
        height: 100px;
        background: aliceblue;
         white-space: nowrap;
    }
    .el-scrollbar {
        height: 100%;
    }
   .box  .el-scrollbar__wrap {
        overflow: scroll;
        width: 110%;
        height: 120%;
    }
</style>

3.谷歌浏览器直接改变原生滚动条样式。
这样不用其他插件，滚动条也能很好看，不考虑兼容的时候，可以全局设置成这种样式，然后细节处用el-scrollbar~~偷懒，
在这里插入图片描述

<style>
  ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    ::-webkit-scrollbar-thumb {
        background-color: #eee;
        border-radius: 3px;
    }
  <style>

小结

还有很重要的一点，在vue框架下，样式.el-scrollbar__wrap要写到影响全局的style中，不要写到style scope中，不然会不起作用。
如果怕和别的样式起冲突，可以加前缀.box .el-scrollbar__wrap{ overflow: scroll; width: 110%; height: 120%;}。宽高不是固定死的，根据自己的页面可以微调一下。
.el-scrollbar 也可以写成行内样式。

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