渐变色滚动条

渐变色滚动条

目录

• 渐变色滚动条
• 目录
• 背景
• 版权
• 环境
• 效果
• 配置

[toc]

背景

给自己博客新增一个好看的渐变色滚动条。😜

版权

次功能来源于《白木》大佬，感谢大佬。💖💖💖

环境

Teek@1.5.1-2025.10.19版本

Teek-one开箱即用版仓库：https://cnb.cool/onedayxyy/vitepress-theme-teek-one-public

效果

配置

（1）新建docs\.vitepress\theme\style\scrollbar-2.scss文件：

/* 来源于 packages\theme-chalk\src\vp-plus\scrollbar.scss 进行二次美化后的效果 */
/* 全局滚动条样式 */
::-webkit-scrollbar {
  width: 0.45rem;
  height: 0.45rem;
}

::-webkit-scrollbar-track {
  border-radius: 2em;
  background: transparent;
}

@keyframes scrollbar-glow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

/* 滚动条滑块样式 🌅亮色模式 */
html:not(.dark) ::-webkit-scrollbar-thumb {
  background: linear-gradient(
    120deg,
    /* 可自定义配置颜色 */
    rgba(51, 255, 204, 1),
    rgba(255, 255, 255, 0.8),/* 过渡色 */
    rgba(255, 91, 91, 1),
    rgba(255, 255, 255, 0.8),/* 过渡色 */
    rgba(102, 174, 255, 1),
    rgba(51, 255, 204, 1)
  );
  background-size: 200% 200%;
  animation: scrollbar-glow 3s linear infinite alternate;
  border-radius: 2em;
  background-clip: padding-box;
}

/* 悬停 🌅亮色模式 */
html:not(.dark) ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    120deg,
    /* 可自定义配置颜色 */
    rgba(255, 91, 91, 0.9),
    rgba(255, 255, 255, 0.9),/* 过渡色 */
    rgba(91, 255, 214, 0.9),
    rgba(255, 255, 255, 0.9),/* 过渡色 */
    rgba(51, 92, 255, 0.9),
    rgba(255, 91, 91, 0.9)
  );
  background-size: 200% 200%;
  animation: scrollbar-glow 2s linear infinite alternate;
  border-radius: 2em;
  background-clip: padding-box;
}

/* 滚动条滑块样式 🌆暗色模式） */
html.dark ::-webkit-scrollbar-thumb {
  background: linear-gradient(
    120deg,
    /* 可自定义配置颜色 */ 
    rgba(0, 255, 180, 1),
    rgba(255, 255, 255, 0.7),/* 过渡色 */ 
    rgba(255, 80, 160, 1),
    rgba(255, 255, 255, 0.7),/* 过渡色 */ 
    rgba(120, 100, 255, 1),
    rgba(0, 255, 180, 1)
  );
  background-size: 200% 200%;
  animation: scrollbar-glow 3s linear infinite alternate;
  border-radius: 2em;
  background-clip: padding-box;
}

/* 悬停 🌆暗色模式 */
html.dark ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    120deg,
    /* 可自定义配置颜色 */
     rgba(0, 255, 180, 0.9),
    rgba(255, 255, 255, 0.9),/* 过渡色 */ 
    rgba(255, 80, 160, 0.9),
    rgba(255, 255, 255, 0.9),/* 过渡色 */ 
    rgba(160, 120, 255, 0.9),
    rgba(0, 255, 180, 0.9)
  );
  background-size: 200% 200%;
  animation: scrollbar-glow 2s linear infinite alternate;
  border-radius: 2em;
  background-clip: padding-box;
}

（2）引入

编辑docs\.vitepress\theme\style\index.scss文件，添加如下内容：

@use "./scrollbar-2.scss"; // 滚动条样式-2,渐变色滚动条

（3）验证

运行后，观察效果：

结束。