一招快速在vue中使用element-ui隐藏组件Scrollbar

我们这里不仅介绍element ui 的隐藏组件Scrollbar，还要介绍另一种简单的方式使用这种好看的滚动条前言：第一种呢：这是一个饿了么开发的vue前端框架element ui里面的一个隐藏组件，也就是说在element ui官方文档中没有的组件，但是我们在想使用滚动条的时候发现window的默认滚动条真的好丑，但是element官网里面的组件介绍里面页面的滚动条很好看，鼠标悬浮的时候，..

清风问水

6507人浏览 · 2019-05-13 16:57:00

清风问水 · 2019-05-13 16:57:00 发布

我们这里不仅介绍element ui 的隐藏组件Scrollbar，还要介绍另一种简单的方式使用这种好看的滚动条
前言：
第一种呢：这是一个饿了么开发的vue前端框架element ui里面的一个隐藏组件，也就是说在element ui官方文档中没有的组件，但是我们在想使用滚动条的时候发现window的默认滚动条真的好丑，但是element官网里面的组件介绍里面页面的滚动条很好看，鼠标悬浮的时候，出现滚动条，而且很精致。

废话少絮，直接上菜

在这里插入图片描述
最外层div是必要的，要确定固定高度
el-scrollbar这个组件必然是要先引入到main.js（vue的入口文件中的）

我们再看这张图，：native必须是false 是要告诉组件我们是否使用原生滚动，这里我们使用elmentui里面的，所以不用原生框架。我们再看noresize我们有条件最好写上它，对它的解释是容器大小是否是不可变的，它保证了我们更好的效率，tag是指向这个组件代表的是div还是其他元素，其他属性以后给大家上图介绍，也可以自己去看源码，一共7个属性，我这里介绍的是最简单的一种快速使用的方法，其他都没有介绍。

我们一定要配合css使用，最上面的图右侧就是它对应的css，这样才能保证滚动条的正确，css种第一行是穿透修改el-scrollbar__wrap 的样式，使得不显示横向滚动。

下面是el-scrollbar 组件的详细属性，供大家参考
在这里插入图片描述
element ui 的 el-scrollbar 组件效果展示

在这里插入图片描述

现在我介绍另一款scrollbar ，废话少絮，直接上菜，把下面的css直接拷贝到你要引入项目的位置，然后引入，如何使用呢：参考我的有道云笔记 http://note.youdao.com/noteshare?id=f50ee9b2bd350b300ecd0be020cf78a7

这里简单说一下使用方法：在元素种加入下面的内容，结合你引入的css即可达到效果了
方法一：
class=“scrollbar-23” style=“max-height:560px; overflow-y:auto;”
方法二:
style=“max-height:200px; overflow:auto;”

这是scrollbar.css 文件内容，直接拷贝到你要引入项目的位置，然后引入

body::-webkit-scrollbar-track {
    background-color: #F5F5F5;
}

body::-webkit-scrollbar {
    width: 8px;
}

body::-webkit-scrollbar-thumb {
    background-color: #1E8BC3;
}
/* Demos - Scrollbar 1 */

.scrollbar-1::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    -moz-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    -o-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 5px;
    background-color: #F5F5F5;
}

.scrollbar-1::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.scrollbar-1::-webkit-scrollbar-thumb {
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    -moz-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    -o-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #393939;
}

/* Demos - Scrollbar 2 */

.scrollbar-2::-webkit-scrollbar-track {
    background-color: #F5F5F5;
}

.scrollbar-2::-webkit-scrollbar {
    width: 8px;
    height: 10px;
}

.scrollbar-2::-webkit-scrollbar-thumb {
    background-color: #c0392b;
}

/* Demos - Scrollbar 3 */

.scrollbar-3::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
    -moz-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
    -o-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
    box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
    border-radius: 10px;
    background-color: #272626;
}

.scrollbar-3::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.scrollbar-3::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #297ED6;
    background-image: -webkit-linear-gradient(50deg, transparent, rgba(0, 0, 0, 0.6) 50%, transparent, transparent)
}

/* Demos - Scrollbar 4 */

.scrollbar-4::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.6);
    -moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.6);
    -o-box-shadow: inset 0 0 4px rgba(0,0,0,0.6);
    box-shadow: inset 0 0 4px rgba(0,0,0,0.6);
    background-color: #F5F5F5;
}

.scrollbar-4::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.scrollbar-4::-webkit-scrollbar-thumb {
    background-color: #8221AB;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.8, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
}

/* Demos - Scrollbar 5 */

.scrollbar-5::-webkit-scrollbar-track {
    background-color: rgba(0,0,0,0.1);
    border-radius: 5px;
}

.scrollbar-5::-webkit-scrollbar-thumb {
    background-color: #000;
    border-radius: 5px;
}

.scrollbar-5::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

/* Demos - Scrollbar 6 */

.scrollbar-6::-webkit-scrollbar-thumb {
    background-color: #094C8C;
    border-radius: 5px;
}

.scrollbar-6::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

.scrollbar-6::-webkit-scrollbar-track {
    background-color: rgba(0,0,0,0.2);
    box-shadow: inset 0px 0px 0px 2px #78addf;
    -webkit-box-shadow: inset 0px 0px 0px 2px #78addf;
    -moz-box-shadow: inset 0px 0px 0px 2px #78addf;
    -o-box-shadow: inset 0px 0px 0px 2px #78addf;
    border-radius: 5px;
}

/* Demos - Scrollbar 7 */

.scrollbar-7::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.1);
    -moz-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.1);
    -o-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.1);
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.1);
    background-color: #F5F5F5;
    border-radius: 8px;
}

.scrollbar-7::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.scrollbar-7::-webkit-scrollbar-thumb {
    background-color: #646464;
    border-radius: 8px;
    background-image: -webkit-linear-gradient(30deg, rgba(0, 0, 0, .2) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .2) 50%, rgba(0, 0, 0, .2) 75%, transparent 75%, transparent);
}

/* Demos - Scrollbar 8 */

.scrollbar-8::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    -moz-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    -o-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
    border-radius: 10px;
}

.scrollbar-8::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.scrollbar-8::-webkit-scrollbar-thumb {
    background-color: #E033FF;
    border-radius: 6px;
    background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0.5) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.5) 75%, transparent 20%, transparent);
}

/* Demos - Scrollbar 9 */

.scrollbar-9::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.1);
    -moz-box-shadow: inset 0 0 1px rgba(0,0,0,0.1);
    -o-box-shadow: inset 0 0 1px rgba(0,0,0,0.1);
    box-shadow: inset 0 0 1px rgba(0,0,0,0.1);
    background-color: #F5F5F5;
}

.scrollbar-9::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.scrollbar-9::-webkit-scrollbar-thumb {
    background-color: #FFF;
    background-image: -webkit-linear-gradient(top, #E7F515 0%, #EBF384 20%, #C6D211 51%, #E8F34D 100%);
}

/* Demos - Scrollbar 10 */

.scrollbar-10::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 0 rgba(0,0,0,0.8);
    -moz-box-shadow: inset 0 0 0 rgba(0,0,0,0.8);
    -o-box-shadow: inset 0 0 0 rgba(0,0,0,0.8);
    box-shadow: inset 0 0 0 rgba(0,0,0,0.8);
    background-color: #f7f7f7;
}

.scrollbar-10::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

.scrollbar-10::-webkit-scrollbar-thumb {
    background-image: -webkit-gradient(linear, right bottom, left top, color-stop(0.30, #162940), color-stop(0.60, #3067A9), color-stop(0.90, #3B87E2));
}

/* Demos - Scrollbar 11 */

.scrollbar-11::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    -moz-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    -o-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
    border-radius: 10px;
}

.scrollbar-11::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    border-radius: 10px;
}

.scrollbar-11::-webkit-scrollbar-thumb {
    background-color: #005AFF;
    border-radius: 10px;
    background-image: -webkit-linear-gradient(150deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
}

/* Demos - Scrollbar 12 */

.scrollbar-12::-webkit-scrollbar-track {
    background-color: #393939;
}

.scrollbar-12::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

.scrollbar-12::-webkit-scrollbar-thumb {
    background-color: #f6f6f6;
}

/* Demos - Scrollbar 13 */

.scrollbar-13::-webkit-scrollbar-track {
    -webkit-box-shadow: 2px 5px 6px rgba(0,0,0,0.1);
    -moz-box-shadow: 2px 5px 6px rgba(0,0,0,0.1);
    -o-box-shadow: 2px 5px 6px rgba(0,0,0,0.1);
    box-shadow: 2px 5px 6px rgba(0,0,0,0.1);
    background-color: #F5F5F5;
    border-radius: 8px;
}

.scrollbar-13::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    border-radius: 8px;
}

.scrollbar-13::-webkit-scrollbar-thumb {
    background-color: #28b362;
    border-radius: 8px;
    background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, .2) 25%, transparent 30%, transparent 60%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 90%, transparent);
}

/* Demos - Scrollbar 14 */

.scrollbar-14::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.scrollbar-14::-webkit-scrollbar-track {
    background: #eee;
    border: thin solid lightgray;
    box-shadow: 0px 0px 2px #f6f6f6 inset;
    -moz-box-shadow: 0px 0px 2px #f6f6f6 inset;
    -webkit-box-shadow: 0px 0px 2px #f6f6f6 inset;
    -o-box-shadow: 0px 0px 2px #f6f6f6 inset;
}

.scrollbar-14::-webkit-scrollbar-thumb {
    background: #626262;
    border: thin solid #000;
}

/* Demos - Scrollbar 15 */

.scrollbar-15::-webkit-scrollbar {
    width: 2px;
    height: 2px;
}

.scrollbar-15::-webkit-scrollbar-track {
    background: #ddd;
    border: thin solid lightgray;
    box-shadow: 0px 0px 2px #f6f6f6 inset;
    -moz-box-shadow: 0px 0px 2px #f6f6f6 inset;
    -webkit-box-shadow: 0px 0px 2px #f6f6f6 inset;
    -o-box-shadow: 0px 0px 2px #f6f6f6 inset;
}

.scrollbar-15::-webkit-scrollbar-thumb {
    background: #373737;
    border: thin solid #000;
}

/* Demos - Scrollbar 16 */

.scrollbar-16::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    border-radius: 4px;
}

.scrollbar-16::-webkit-scrollbar-track {
    background: #C5EFF7;
    border-radius: 4px;
}

.scrollbar-16::-webkit-scrollbar-thumb {
    background: #89CDDA;
    border-radius: 4px;
}

/* Demos - Scrollbar 17 */

.scrollbar-17::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 2px #f6f6f6;
    -moz-box-shadow: inset 0 0 2px #f6f6f6;
    -o-box-shadow: inset 0 0 2px #f6f6f6;
    box-shadow: inset 0 0 2px #f6f6f6;
    background-color: #266941;
}

.scrollbar-17::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

.scrollbar-17::-webkit-scrollbar-thumb {
    background-color: #38DE7B;
    border: 1px solid #0B803A;
    border-radius: 6px;
}

/* Demos - Scrollbar 18 */

.scrollbar-18::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.9);
    -moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.9);
    -o-box-shadow: inset 0 0 3px rgba(0,0,0,0.9);
    box-shadow: inset 0 0 3px rgba(0,0,0,0.9);
    background-color: #FFE31A;
}

.scrollbar-18::-webkit-scrollbar {
    width: 9px;
    width: 9px;
}

.scrollbar-18::-webkit-scrollbar-thumb {
    background-color: #FB3718;
    background-image: -webkit-linear-gradient(50deg, transparent, rgba(0, 0, 0, 0.6) 50%, transparent, transparent);
}

/* Demos - Scrollbar 19 */

.scrollbar-19::-webkit-scrollbar {
    width: 1px;
    height: 1px;
}

.scrollbar-19::-webkit-scrollbar-track {
    background: #eee;
    border: thin solid lightgray;
    box-shadow: 2px 0px 2px #f6f6f6 inset;
    -moz-box-shadow: 2px 0px 2px #f6f6f6 inset;
    -webkit-box-shadow: 2px 0px 2px #f6f6f6 inset;
    -o-box-shadow: 2px 0px 2px #f6f6f6 inset;
}

.scrollbar-19::-webkit-scrollbar-thumb {
    background: #1E8BC3;
}

/* Demos - Scrollbar 20 */

.scrollbar-20::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.scrollbar-20::-webkit-scrollbar-track {
    background: #d6d6d6;
    border: thin solid lightgray;
    box-shadow: 0px 2px 2px #f6f6f6 inset;
    -moz-box-shadow: 0px 2px 2px #f6f6f6 inset;
    -webkit-box-shadow: 0px 2px 2px #f6f6f6 inset;
    -o-box-shadow: 0px 2px 2px #f6f6f6 inset;
}

.scrollbar-20::-webkit-scrollbar-thumb {
    background: #FF7D7D;
    border: 1px dashed #DC0000;
}

/* Demos - Scrollbar 21 */

.scrollbar-21::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0px 0px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: inset 0px 0px 2px rgba(0,0,0,0.2);
    -o-box-shadow: inset 0px 0px 2px rgba(0,0,0,0.2);
    box-shadow: inset 0px 0px 2px rgba(0,0,0,0.2);
    background-color: #4DE4DD;
    border-radius: 10px;
}

.scrollbar-21::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.scrollbar-21::-webkit-scrollbar-thumb {
    background-color: #0E767B;
    border-radius: 10px;
    background-image: -webkit-linear-gradient(90deg, rgba(0, 0, 0, .2) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .3) 50%, rgba(0, 0, 0, .5) 75%, transparent 75%, transparent);
}

/* Demos - Scrollbar 22 */

.scrollbar-22::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

.scrollbar-22::-webkit-scrollbar-thumb {
    background: #ff35c2;
    border: 0px none #ffffff;
    border-radius: 8px;
}

.scrollbar-22::-webkit-scrollbar-track {
    background: #A5127E;
    border: 0px none #ffffff;
    border-radius: 8px;
}

/* Demos - Scrollbar 23 */

.scrollbar-23::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 2px #f6f6f6;
    -moz-box-shadow: inset 0 0 2px #f6f6f6;
    -o-box-shadow: inset 0 0 2px #f6f6f6;
    box-shadow: inset 0 0 2px #f6f6f6;
}

.scrollbar-23::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    border-radius: 10px;
}

.scrollbar-23::-webkit-scrollbar-thumb {
    background-color: #21E0FF;
    border-radius: 10px;
    border: 1px solid #007EFF;
}

/* Demos - Scrollbar 24 */

.scrollbar-24::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.scrollbar-24::-webkit-scrollbar-track {
    background: #86F74D;
}

.scrollbar-24::-webkit-scrollbar-thumb {
    background: #48AF14;
}

/* Demos - Scrollbar 25 */

.scrollbar-25::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.3);
    -moz-box-shadow: inset 0 0 1px rgba(0,0,0,0.3);
    -o-box-shadow: inset 0 0 1px rgba(0,0,0,0.3);
    box-shadow: inset 0 0 1px rgba(0,0,0,0.3);
    background-color: #ddd;
    border-radius: 10px;
}

.scrollbar-25::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.scrollbar-25::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-image: -webkit-linear-gradient(top, #F70505 0%, #C73535 20%, #AD3A3A 51%, #9A3737 100%);
}

/* Demos - Scrollbar 26 */

.scrollbar-26::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.3);
    -moz-box-shadow: inset 0 0 1px rgba(0,0,0,0.3);
    -o-box-shadow: inset 0 0 1px rgba(0,0,0,0.3);
    box-shadow: inset 0 0 1px rgba(0,0,0,0.3);
    background-color: #393939;
}

.scrollbar-26::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.scrollbar-26::-webkit-scrollbar-thumb {
    background-color: #6B6C82;
    background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0.5) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.5) 75%, transparent 50%, transparent);
}

/* Demos - Scrollbar 27 */

.scrollbar-27::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.8);
    -moz-box-shadow: inset 0 0 1px rgba(0,0,0,0.8);
    -o-box-shadow: inset 0 0 1px rgba(0,0,0,0.8);
    box-shadow: inset 0 0 1px rgba(0,0,0,0.8);
    background-color: #fff;
}

.scrollbar-27::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.scrollbar-27::-webkit-scrollbar-thumb {
    background-image: -webkit-gradient(linear, right bottom, left top, color-stop(0.16, #FB942B), color-stop(0.24, #D4710C), color-stop(0.80, #A95704));
}

效果展示：
在这里插入图片描述
此文为原创！
原创说明：如想转发，请标明原创地址，尊重原创！

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^