2026-08-06 00:342026-08-06 00:34记录

全站滚动条改版:Butterfly 风格 5px 主题色细条

前阵子把文章按状态重组成 content/published|draft|trash|hidden 后,顺手整理主题(ark)的滚动条。这篇记录改版思路与最终方案。

问题:滚动条要么没有,要么很丑

改版前全站的滚动条状态其实很乱:

文章页正文完全没有滚动条。正文的滚动容器 .editor-surface 被设了 scrollbar-width: none,滚轮能用,但右边光秃秃的,完全没有视觉反馈;
其他地方都是系统原生滚动条。侧边栏、代码块、终端、弹窗各自为政,Windows 上 Chrome 的原生灰条既粗又丑,和暗色主题格格不入;
tabline 的横向滚动条只有 3px、16% 透明度,几乎看不见。

需求很朴素:全站滚动条统一,藏进页面里的细条,横向纵向都要管。

参考:Butterfly 主题的方案

Butterfly是 Hexo 的知名主题,它的滚动条观感一直是”轻、贴、不抢眼”。扒了它的 CSS,核心就三条:

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-color); /* 主题色 */
}
::-webkit-scrollbar-track {
  background-color: transparent; /* 轨道全透明,滚动条"沉"进页面 */
}
/* Firefox 用标准的 scrollbar 属性 */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-color) transparent;
}

几个要点:

5px 宽高都有,横向滚动条(代码块、tabline)同样适用;
thumb 用主题色实心填充、不加圆角不加阴影,极简;
轨道透明,不占视觉面积,滚动条像是画在页面上的细线;
暗色模式下 Butterfly 把 --scrollbar-color 换成中性灰(它用 #525252),不用亮蓝,避免刺眼。

实现

1. 颜色变量

在 assets/css/ark-vars.e262c843.css 的亮/暗两套变量里各加一个 --scrollbar-color:

:root {
  --scrollbar-color: #0969da; /* 亮色:主题蓝 */
}
:root[data-mode="dark"] {
  --scrollbar-color: #3d4450; /* 暗色:中性灰 */
}

亮色直接用主题蓝 --accent 同款 #0969da,和站内强调色一致;暗色不用亮蓝而是低调的 #3d4450,参考 Butterfly 的做法。

2. 全局规则

同样放在 ark-vars.e262c843.css 末尾(变量和基础样式的落点),和上面 Butterfly 的方案一致:5px 宽高、主题色 thumb、透明轨道,外加 @-moz-document url-prefix() 给 Firefox 套 scrollbar-width: thin + scrollbar-color。

写在全局(而不是某个容器上),所有滚动容器自动生效:文章正文、侧边栏、代码块、终端、tabline、弹窗列表,横向纵向全覆盖,不用逐个容器去配。

3. 删掉局部覆盖

之前的局部样式全部移除,避免和全局规则打架:

.editor-surface(文章正文):删掉 scrollbar-width: none 和它的 ::-webkit-scrollbar 隐藏规则 —— 这是”文章页没有滚动条”的元凶,删掉后全局规则接管,5px 主题色细条立刻出现;
.editor-tabline(标签栏):删掉 3px 灰条那套自定义滚动条,横向滚动交给全局的 5px 高度规则。

保留的例外有两个:

.article-toc(文章目录浮层):有意隐藏滚动条,滚动靠滚轮/触控板,视觉更干净;
.editor-tabline(标签栏)的横向滚动条:像 VS Code、Sublime 这类软件一样,标签太多时滚动条直接隐藏,靠滚轮左右滚动(见下),5px 全局横条只留给代码块等横向溢出的内容区。

标签栏滚轮横滚

隐藏滚动条后得保证标签能滚动。在 assets/js/ark-editor.41dbe005.js 里给 .editor-tabline 挂了一个 wheel 监听:

editorTabline.addEventListener("wheel", function (event) {
  if (editorTabline.scrollWidth <= editorTabline.clientWidth) return; // 没溢出不拦截
  if (Math.abs(event.deltaY) <= Math.abs(event.deltaX)) return;      // 横向滚轮事件放行
  event.preventDefault();
  editorTabline.scrollLeft += event.deltaY + event.deltaX;
}, { passive: false });

只有标签真正溢出时才拦截滚轮,否则不影响页面竖向滚动;
触控板/鼠标横滚(deltaX)原样放行;
鼠标滚轮(deltaY)转成 scrollLeft,实现”滚轮左右滚标签”的软件惯例。

效果

文章页右侧出现 5px 主题蓝竖条,滚动位置一目了然;
代码块横向溢出时是 5px 主题色横条;
标签栏横向滚动条隐藏,溢出时滚轮可直接左右滚动;
暗色模式下是中性灰,不刺眼;
轨道透明,滚动条”浮”在页面内容上,正是 Butterfly 那种藏在网页里的感觉。