useScrollComputed

useScrollComputed：滚动条样式统一管理 Hooks

痛点来源

原生浏览器滚动条样式差异大、难以统一，且在现代 UI 设计中常常需要自定义外观（颜色、宽度、hover 效果）。常见问题包括：

• 全局滚动条样式无法通过普通 CSS 变量直接控制（需作用于 :root）
• 不同组件（如 Scrollbar、虚拟列表、容器溢出）对滚动条样式的需求重复
• 动态主题切换时，滚动条颜色需实时更新并在组件销毁时清理
• 局部滚动条与全局滚动条需求并存（全局影响整个页面，局部仅影响容器）
• 宽度/高度单位处理不一致，易遗漏 px 转换
• 未清理的全局样式会导致多实例或切换时样式残留、污染

若每个滚动相关组件都自行处理这些逻辑，会导致样式不统一、清理遗漏、主题适配困难。

设计目标

本文件提供两套互补的滚动条样式管理方案：

• useScrollStyles：全局滚动条样式控制，动态注入到 :root，并自动清理
• useScrollVariables：局部滚动条样式控制，返回 CSS 变量对象，适用于单个容器

共同目标是：统一滚动条视觉规范，支持全局与局部双模式，完美适配动态主题与组件生命周期。

核心工具对比

Hook	适用场景	作用范围	关键特性
useScrollStyles	需要影响整个页面滚动条（如全局主题）	全局 :root	自动注入/清理全局变量 响应式 ComputedRef 生命周期安全
useScrollVariables	自定义 Scrollbar 容器或局部溢出区域	局部容器	纯对象返回，无副作用 自动单位处理 变量名前缀隔离

核心特性

特性	说明
全局样式自动生命周期管理	onMounted 注入 :root 变量，onUnmounted 自动移除，防止样式泄漏
响应式局部样式	useScrollStyles 返回 ComputedRef<CSSProperties>，支持 props 变化实时更新
单位智能处理	scrollWidth/scrollHeight 数字自动加 px，字符串直接透传
变量名隔离	局部使用 --scrollbar-container-* 前缀，避免与全局冲突
全局变量统一	使用 --global-scroll-* 系列，确保整个库滚动条视觉一致
SSR 安全	DOM 操作仅在客户端执行（隐式通过 onMounted/onUnmounted）

设计价值

这两个工具共同构成了组件库完整的滚动条样式解决方案：

全局一致性：通过 useScrollStyles 确保所有原生滚动条在主题切换时同步更新 局部灵活性：useScrollVariables 支持独立容器自定义外观 安全可靠：自动清理机制杜绝样式污染，适合动态加载组件 与主题系统无缝衔接：变量名规范、颜色 props 统一 减少重复：所有滚动条相关样式逻辑集中于此，组件无需关心实现细节