滚动进度映射颜色需用 scrolly / (scrollheight - clientheight) 计算比例，防分母为0；css变量须用 setproperty 设置在 :root，hsl比rgb更适渐变，配合 requestanimationframe 避免卡顿。
滚动位置转颜色值：用 window.scrollY 和 document.documentElement.scrollHeight 算比例
背景色随滚动渐变，核心不是“监听滚动就改色”，而是把滚动进度（0% → 100%）映射成颜色通道值。关键比例公式是：scrollY / (scrollHeight - clientHeight)。注意分母不能为 0，需加保护；scrollHeight 包含不可见区域，clientHeight 是可视区高，差值才是可滚动距离。
常见错误是直接用 scrollY / scrollHeight，这会导致拉到底部时比例不到 1（因为 scrollHeight 比实际滚动距离大）。正确写法要减去 clientHeight：
const progress = Math.min( window.scrollY / (document.documentElement.scrollHeight - window.innerHeight), 1 );
CSS 自定义属性传值：用 document.documentElement.style.setProperty()
CSS 变量必须挂载在 :root 或 html 元素上才能全局生效。JS 改变量必须用 setProperty，不能直接赋值 style.--bg-hue（语法非法）。变量名带横线要加引号，比如 '--bg-hue'，且值必须是字符串（即使数字也要 String(progress * 360)）。
实操建议：
- 在
scroll事件里调用requestAnimationFrame避免卡顿，别直接写进addEventListener('scroll', ...) - 变量命名保持语义，如
--bg-hue、--bg-sat，方便 CSS 里组合使用hsl(var(--bg-hue), var(--bg-sat), 65%) - 首次加载时手动触发一次计算，避免首屏不生效
HSL 比 RGB 更适合滚动渐变：用 hsl() 直接插值
RGB 的 R/G/B 三个通道非线性变化容易产生脏色或突兀过渡；HSL 的 Hue（色相）是 0–360 度环形值，从红(0)→黄(60)→绿(120)→青(180)→蓝(240)→紫(300)→红(360)，用 progress * 360 就能平滑扫过光谱。饱和度和明度可固定或微调，降低复杂度。
示例 CSS：
:root {
--bg-hue: 0;
}
body {
background: hsl(var(--bg-hue), 80%, 55%);
}
这样 JS 只需更新 --bg-hue，其余交给 CSS 计算，性能好、易维护。
防抖与精度控制：不用 throttle，但要限制更新频率
滚动事件每秒可能触发上百次，但人眼无法分辨 60fps 以上的颜色变化。直接用 requestAnimationFrame 是最轻量的节流——它天然对齐屏幕刷新率，且比 setTimeout 或 Lodash throttle 更精准、无额外依赖。
容易被忽略的点：
-
scrollY在某些 iOS Safari 版本中可能返回小数，做比较时别用=== 0，改用 - 页面高度动态变化（如图片懒加载完成）时，
scrollHeight会变，需在load或resize后重新缓存，否则比例计算偏移 - 深色模式下，如果背景色太浅，记得在媒体查询里覆盖
--bg-sat或--bg-lightness
滚动渐变本质是把一维滚动位置映射到颜色空间，HSL 提供了最直观的线性路径；而真正难的不是算数，是让这个映射在各种设备、各种内容高度下都稳定输出——分母的 - clientHeight、首次初始化、以及 requestAnimationFrame 的包裹，这三个地方漏掉任何一个，都会导致“看起来差不多但总有点不对劲”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
