Vue&Element隐藏组件el-scrollbar滚动条

注意：<el-scrollbar> </el-scrollbar>这个组件的外层和内层一定要有一个div，本文定义了div 'father’和div “child”，div 'father’设不设置高度都可，但没有这个div的话底部和出现一条横向的滚动条如下图；div “child” 一定要设置高度不然的话滚动条是出不来的，最后div "child"里面才是我们要放的...

爱唱歌的前端

5466人浏览 · 2019-06-04 11:49:11

爱唱歌的前端 · 2019-06-04 11:49:11 发布

项目场景：

我们都知道浏览器自带的滚动条非常粗糙，直到我学vue时用了element-ui，我发现他们官方文档的滚动条非常简约，很不错，于是便找了下文档但没找着，接着打开浏览器控制台，发现了el-scrollbar的类名，心想是不是有这么一个隐藏的组件，没想到试了下真的有，写了个Demo分享给大家。
在这里插入图片描述

代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<style>
    body {
        margin: 0;
        width: 100%;
        overflow: hidden;
    }
    
    main {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
    }
    
    section {
        width: 400px;
        height: 600px;
        background: rgb(123, 250, 55);
    }
    
    article {
        width: 500px;
        color: #333;
        background: rgba(247, 169, 61, 0.2);
    }
</style>

<body>
    <div id="app">
        <main>
            <el-scrollbar>
                <section>
                    <article>
                        六月的雨 - 胡歌 (Hugh)
                        <br>词：薛永嘉
                        <br>曲：薛永嘉
                        <br>一场雨 把我困在这里
                        <br>你冷漠的表情 会让我伤心
                        <br>六月的雨 就是无情的你
                        <br>伴随着点点滴滴 痛击我心里
                        <br>哦 我不相信 你不是故意的
                        <br>却为何把我丢弃在风雨里
                        <br>哦 我不忍心 也不想背叛你
                        <br>惟有默默等你 回心转意
                        <br>我没有放弃 也不会离你而去
                        <br>哪怕要分开 我依然等你
                        <br>我全心全意 等你的消息
                        <br>总会有一天 你会相信我 我爱你
                        <br>一场雨 想念你
                        <br>在我的心中都不可比拟 哦 耶
                        <br>你走后 什么都
                        <br>已经消失在风雨里
                        <br>一场雨 想念你
                        <br>我爱你 我爱你
                        <br>一场雨 把我困在这里
                        <br>你冷漠的表情 会让我伤心
                        <br>六月的雨 就是无情的你
                        <br>伴随着点点滴滴 痛击我心里
                        <br>哦 我不相信 你不是故意的
                        <br>却为何把我丢弃在风雨里
                        <br>哦 我不忍心 也不想背叛你
                        <br>惟有默默等你 回心转意
                        <br>我没有放弃 也不会离你而去
                        <br>哪怕要分开 我依然等你
                        <br>我全心全意 等你的消息
                        <br>总会有一天 你会相信我 我爱你
                        <br>一场雨 想念你
                        <br>在我的心中都不可比拟 哦 耶
                        <br>你走后 什么都
                        <br>已经消失在风雨里 风雨里
                        <br>一场雨 想念你
                        <br>我爱你 我爱你
                    </article>
                </section>
            </el-scrollbar>
        </main>
    </div>
</body>
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function() {
            return {
                visible: false
            }
        }
    })
</script>

</html>

瞎搞：

一开始我只是以为饿了么团队只是简单的改了样式，但是当我简单修改了滚动条样式后发现并没有达到它那种效果（鼠标移动到内容区才会显示滚动条，并且滚动条是在内容区里边的），看来是在下弟弟了，不过也还能用，就这个狗样吧。▄█▀█●
在这里插入图片描述

啥也不是代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
</head>
<style>
    body {
        margin: 0;
        width: 100%;
        overflow: hidden;
    }
    
    main {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
    }
    
    .custom-scrollbar {
        overflow: scroll;
    }
    
    .custom-scrollbar::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
    
    .custom-scrollbar::-webkit-scrollbar-track {
        /* 滚动条的轨道 */
        /* background: rgba(255, 255, 255, 1); */
    }
    
    .custom-scrollbar::-webkit-scrollbar-thumb {
        /* 滚动条里面的小滑块 */
        background-color: hsla(220, 4%, 58%, .3);
        border-radius: 10px;
    }
    
    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
        background-color: hsla(220, 4%, 58%, .5);
    }
    
    .custom-scrollbar::-webkit-scrollbar-corner {
        /* 边角，即两个滚动条的交汇处 */
        /* background: rgba(255, 255, 255, 1); */
    }
    
    section {
        width: 400px;
        height: 600px;
        background: rgb(123, 250, 55);
    }
    
    article {
        width: 500px;
        color: #333;
        background: rgba(247, 169, 61, 0.2);
    }
</style>

<body>
    <main>
        <div class="custom-scrollbar">
            <section>
                <article>
                    六月的雨 - 胡歌 (Hugh)
                    <br>词：薛永嘉
                    <br>曲：薛永嘉
                    <br>一场雨 把我困在这里
                    <br>你冷漠的表情 会让我伤心
                    <br>六月的雨 就是无情的你
                    <br>伴随着点点滴滴 痛击我心里
                    <br>哦 我不相信 你不是故意的
                    <br>却为何把我丢弃在风雨里
                    <br>哦 我不忍心 也不想背叛你
                    <br>惟有默默等你 回心转意
                    <br>我没有放弃 也不会离你而去
                    <br>哪怕要分开 我依然等你
                    <br>我全心全意 等你的消息
                    <br>总会有一天 你会相信我 我爱你
                    <br>一场雨 想念你
                    <br>在我的心中都不可比拟 哦 耶
                    <br>你走后 什么都
                    <br>已经消失在风雨里
                    <br>一场雨 想念你
                    <br>我爱你 我爱你
                    <br>一场雨 把我困在这里
                    <br>你冷漠的表情 会让我伤心
                    <br>六月的雨 就是无情的你
                    <br>伴随着点点滴滴 痛击我心里
                    <br>哦 我不相信 你不是故意的
                    <br>却为何把我丢弃在风雨里
                    <br>哦 我不忍心 也不想背叛你
                    <br>惟有默默等你 回心转意
                    <br>我没有放弃 也不会离你而去
                    <br>哪怕要分开 我依然等你
                    <br>我全心全意 等你的消息
                    <br>总会有一天 你会相信我 我爱你
                    <br>一场雨 想念你
                    <br>在我的心中都不可比拟 哦 耶
                    <br>你走后 什么都
                    <br>已经消失在风雨里 风雨里
                    <br>一场雨 想念你
                    <br>我爱你 我爱你
                </article>
            </section>
        </div>
    </main>
</body>

</html>

over~~

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}$/, //不连续的两位字母// /^