前言¶
DSH 的 Web GUI 里滚动条默认是细条、低对比，鼠标靠近时不好点也不好拖。把滚动条整体加粗是一个直接的解法，但 Chromium 里 ::-webkit-scrollbar 的 width 是参与布局的：悬停时从 5px 改成 10px，旁边所有盒子会跟着重排，看起来就是正文向左缩一下。
下面介绍的这个插件用另一种做法解决：滚动槽宽度从一开始就恒定预留 10px，悬停时只把滑块画粗，布局零变化。由 ThEmbrace 维护，目前在社区目录 SkillHub 的分类是「趣味换装」，定位是纯 UI 调整，不改主题 token、不改 asar、不引入运行时依赖。
这是什么¶
一句话：一个 DSH Web GUI 客户端插件，让纵向滚动容器的滚动条在鼠标靠近时临时加粗到 10px，离开后立刻恢复原样。
插件包名 dsh-thick-scrollbar，版本 0.1.1，许可证 MIT。职责边界很窄——只改滚动条的绘制，不动任何业务逻辑。
核心功能¶
分三步理解它的行为。
1、基线注入。插件加载时在 html body 上把 --dsh-scrollbar-width 定为 10px、--dsh-scrollbar-thumb-border 定为 2.5px。透明边框把绘制的滑块内缩回去，所以看起来和原来一样细，但滚动槽已经永久预留了 10px 的布局空间。
2、悬停加粗。指针进入容器右边缘 13px 窄带（ARM_DISTANCE）时，只给该容器加一个标记属性 data-dsh-thick-scrollbar，由作用域规则把透明边框清零，滑块原地从细条画成 10px。槽宽不变，周围内容一格都不移动。
3、离开恢复。指针离开窄带超过 21px（DISARM_DISTANCE，留 8px 迟滞防抖动）时删掉该属性。插件从不写内联样式，所以不存在恢复原值失败的风险。
滚轮滚动不改变状态——鼠标还压在滚动槽上就保持粗条，容器不会因为滚动而位移。
实测宽度（headless Chromium，DPR 1 与 2 逐像素数过）：
| 状态 | 滚动槽 | 实际绘制滑块 |
|---|---|---|
| ui-theme 原始 | 5px | 5px |
| 插件静止 | 10px | 6px |
| 插件悬停 | 10px | 10px |
静止态绘制 6px 而不是 5px，是因为 Chromium 绘制滚动条伪元素时把 border-width 向下取整：2.5px → 2px，于是 10 − 2×2 = 6。要静止态严格 5px 就得换成「槽 9px + 边框 2px」，代价是悬停只能到 9px。作者选择保住 10px 的悬停宽度，静止态多 1px。
安装与启用¶
README 给出的安装命令如下：
# 从本地目录安装（开发态，改源码立即生效）
plugin_manager install_bundle "link:<本目录绝对路径>"
# 从分发包安装
plugin_manager install_bundle "file:<dsh-thick-scrollbar-0.1.1.tgz 绝对路径>"
# 发布到 npm / GitHub 之后
plugin_manager install_bundle "dsh-thick-scrollbar"
plugin_manager install_bundle "github:<账号>/dsh-thick-scrollbar"
# 卸载
plugin_manager remove_bundle "dsh-thick-scrollbar"
装完需要刷新页面才生效，原因注释里写明了：client bundle 惰性进图，不随 HMR 替换。
典型用法¶
插件装好即生效，没有运行时配置开关。要调参就改 lib/client.js 顶部的常量：
| 常量 | 默认 | 含义 |
|---|---|---|
GUTTER_PX |
10 |
永久预留的滚动槽宽度，也是悬停时的绘制宽度（px） |
REST_BORDER_PX |
2.5 |
静止态透明边框，决定默认可见细条宽度 = GUTTER_PX − 2×REST_BORDER_PX |
ARM_DISTANCE |
GUTTER_PX + 3 |
距右边缘多近开始加粗 |
DISARM_DISTANCE |
GUTTER_PX + 11 |
距右边缘多远恢复 |
想让加粗更明显就抬 GUTTER_PX，同时要抬 REST_BORDER_PX 才能维持默认细条宽度。改完刷新页面即可，不需要重新安装。
改完跑一遍测试确认没改坏：
node --test test/*.test.mjs
注意必须是 glob，在 Windows 上 node --test test/ 会报 Cannot find module。
适用场景与注意¶
适合在 DSH Web GUI 里频繁滚动长对话、长日志或长面板的人。插件只做绘制层面的加粗，行为可预测，没有运行时依赖。
需要留意几点，都写在 README 的边界一节：
- 只处理纵向可滚动容器（
overflow-y: auto|scroll|overlay且scrollHeight > clientHeight）。 - 会永久预留 10px 滚动槽，比主题默认 5px 窄 5px 正文，这是「悬停零重排」的代价。
- 自己重绑了槽宽的表面不受影响：
ui-input-trigger的菜单槽宽定成 6px、ui-schedule定成 9px，这些地方悬停也只到 6px / 9px。这是有意的，不覆盖各组件自己的几何决策。 - 加粗是瞬时的，Chromium 不为
::-webkit-scrollbar伪元素执行transition，没有渐变动画。 - 只面向 Chromium 桌面端，不处理 Firefox 的分支。
另外，插件以当前 DSH 进程权限运行。安装前建议打开仓库确认源码与许可证（MIT），也不要在生产环境未经测试就装第三方客户端 bundle。
结尾¶
这个插件的价值在于把「加粗滚动条」这件小事做到了不引发重排，代价写清楚、边界写清楚、可调参数集中在文件顶部，适合想微调 GUI 手感的人直接上手。
目录页：https://www.skillhub.cn/plugins/ThEmbrace/dsh-thick-scrollbar
GitHub：https://github.com/ThEmbrace/dsh-thick-scrollbar
