项目场景:

我们都知道浏览器自带的滚动条非常粗糙,直到我学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~~

Logo

前往低代码交流专区

更多推荐