vue css设置好看的滚动条

最新推荐文章于 2025-03-16 17:54:48 发布

原创最新推荐文章于 2025-03-16 17:54:48 发布 · 941 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #css3 #css #html

vue 同时被 2 个专栏收录

13 篇文章

订阅专栏

css

2 篇文章

订阅专栏

本文介绍如何使用CSS自定义Vue应用程序中的滚动条样式，通过设置::-webkit-scrollbar等伪元素实现美观且独特的滚动条效果。

vue css设置好看的滚动条

效果图

在这里插入图片描述

css代码

直接在app.vue中的style标签中添加

::-webkit-scrollbar-track
    {
        background: rgba(0,0,0,.1);
        border-radius: 0;
    }

    ::-webkit-scrollbar
    {
        -webkit-appearance: none;
        width: 8px;
        height: 10px;
    }

    ::-webkit-scrollbar-thumb
    {
        cursor: pointer;
        border-radius: 5px;
        /*background: #fd7286;*/
        transition: color .2s ease;
        background-image: linear-gradient(aquamarine,#fd7286,lightgreen);
    }