全局渐变滚动条样式

WDY66886688

已于 2024-03-29 17:29:35 修改

阅读量758

点赞数 17

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： css css3 html

于 2024-03-05 09:06:09 首次发布

本文链接：https://blog.youkuaiyun.com/WDY66886688/article/details/136468712

CSS 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何在Vue应用的APP.vue组件中使用CSS样式，特别是Webkit前缀的样式，为滚动条添加了动态渐变背景效果，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果如下：

APP.vue

<style>
/* 整个滚动条 */
::-webkit-scrollbar {
    width: 5px;
    height: 10px;
}
/* 滚动条上的滚动滑块 */
::-webkit-scrollbar-thumb {
    background-color: #49b1f5;
    /* 关键代码 */
    background-image: -webkit-linear-gradient(45deg,
            rgba(255, 255, 255, 0.4) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.4) 50%,
            rgba(255, 255, 255, 0.4) 75%,
            transparent 75%,
            transparent);
    border-radius: 32px;
}
/* 滚动条轨道 */
::-webkit-scrollbar-track {
    background-color: #dbeffd;
    border-radius: 32px;
}
</style>