10款超好看的网页滚动条 CSS 样式分享（附完整代码）

在网页设计中，滚动条往往是最容易被忽略的细节之一。默认滚动条虽然实用，但与现代化的网站设计风格相比显得较为普通。

通过简单的 CSS 代码，我们可以轻松自定义滚动条的颜色、宽度、圆角以及动画效果，让网站整体视觉更加协调统一。今天整理了 10 款实用且颜值在线的滚动条样式，适用于 WordPress、HTML、Vue、React 等各种网站项目。

一、极简风滚动条

/* 极简风滚动条 */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #999;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #666;
}

适合：个人博客、企业官网、资讯站。

二、蓝色渐变滚动条

/* 蓝色渐变滚动条 */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f5f5f5;
}

::-webkit-scrollbar-thumb {
    border-radius: 20px;
    background: linear-gradient(
        180deg,
        #4facfe,
        #00f2fe
    );
}

适合：科技博客、工具站。

三、毛玻璃滚动条

/* 毛玻璃滚动条 */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: rgba(255,255,255,.08);
}

::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.25);
    border-radius: 20px;
    backdrop-filter: blur(10px);
}

适合：现代化 Dashboard、后台管理系统。

四、暗黑模式滚动条

/* 暗黑模式滚动条 */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #111;
}

::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
    background: #666;
}

适合：深色主题网站。

五、苹果风格滚动条

/* macOS 风格滚动条 */
::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.3);
    border-radius: 50px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,.5);
}

适合：极简博客、高端展示站。

六、彩虹渐变滚动条

/* 彩虹滚动条 */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-thumb {
    border-radius: 20px;
    background: linear-gradient(
        to bottom,
        red,
        orange,
        yellow,
        green,
        cyan,
        blue,
        purple
    );
}

适合：创意网站、个人主页。

七、霓虹灯滚动条

/* 霓虹灯滚动条 */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #0a0a0a;
}

::-webkit-scrollbar-thumb {
    background: #00ffff;
    border-radius: 20px;
    box-shadow:
        0 0 10px #00ffff,
        0 0 20px #00ffff,
        0 0 30px #00ffff;
}

适合：赛博朋克、科技风网站。

八、圆角胶囊滚动条

/* 胶囊滚动条 */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-thumb {
    background: #ff6b6b;
    border-radius: 999px;
    border: 3px solid #fff;
}

适合：生活博客、作品展示站。

九、紫色渐变滚动条

/* 紫色渐变滚动条 */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(255,255,255,.1);
}

::-webkit-scrollbar-thumb {
    border-radius: 20px;
    background: linear-gradient(
        180deg,
        #667eea,
        #764ba2
    );
}

适合：现代 WordPress 主题。

十、隐藏滚动条

仅隐藏滚动条，不影响页面滚动。

/* Chrome、Edge、Safari */
::-webkit-scrollbar {
    display: none;
}

Firefox：

html {
    scrollbar-width: none;
}

WordPress 添加方法

方法一：额外 CSS

进入：

WordPress后台 → 外观 → 自定义 → 额外CSS

将喜欢的滚动条样式直接粘贴保存即可。

方法二：主题 style.css

打开：

/wp-content/themes/你的主题/style.css

代码添加到文件底部。

方法三：代码插件

推荐使用：

  • Code Snippets
  • WPCode
  • Simple Custom CSS

升级主题后不会丢失样式。

Firefox 兼容代码

如果需要兼容 Firefox 浏览器，可额外添加：

html {
    scrollbar-width: thin;
    scrollbar-color: #667eea #f1f1f1;
}

总结

滚动条虽然只是网页中的一个小细节，但却能显著提升网站的整体质感。对于 WordPress 博客、工具站以及后台管理系统来说，统一的滚动条风格能够增强用户体验，让网站显得更加专业。

如果你正在制作现代化 WordPress 主题，推荐优先使用：

✔ 苹果风格滚动条
✔ 毛玻璃滚动条
✔ 蓝色渐变滚动条

简单几行 CSS，就能让网站颜值提升一个档次。

2026年6月21日
评论 (0)