摘要应包含目的、方法、结果、结论四要素，突出创新点；需客观准确、简洁明了、独立完整，避免主观评价与细节引用，字数通常200–300字。
为什么不用 scroll 事件监听滚动深度
scroll 事件在快速滚动时每秒触发几十次，直接读 window.scrollY 并计算颜色会频繁调用 document.documentElement.scrollHeight 和 setPropertyValue，主线程压力大、FPS 明显下降。更关键的是：它无法准确对应“当前可见区块”，尤其在 scroll-snap-type: y mandatory 场景下，滚动是离散的，scrollY 值可能卡在两个面板之间，导致背景色漂移或滞后。
IntersectionObserver 怎么映射滚动深度为颜色值
不是靠像素距离，而是靠元素在视口中的相对可见性。每个带 data-color 或 data-hue 的面板（如 .panel）被 Observer 监听，当它的 intersectionRatio 达到阈值（比如 0.3），就认为“已进入有效滚动深度”。
- 用
entry.intersectionRatio直接作为归一化进度值（0～1），避免手动算scrollY / maxScroll - 若需多段渐变（如三面板分别控制 hue 0/120/240），可对
entries排序后取isIntersecting为 true 的第一个，再查其dataset - 别依赖
threshold: [0, 0.5, 1]就完事——iOS Safari 对小数阈值解析不稳定，推荐[0.1, 0.3, 0.5, 0.7, 0.9]提高容错
CSS 变量怎么安全传入并驱动 hsl() 背景色
document.body.style.setProperty('--bg-hue', hue) 是唯一推荐路径。传整数（如 180），不带单位；CSS 中必须显式消费：
body {
background-color: hsl(var(--bg-hue), 80%, 60%);
transition: background-color 0.4s ease;
}
常见错误现象：--bg-hue 设了但背景不变——大概率是 CSS 里漏写了 hsl()，或变量名拼错（比如写成 --hue 却在 JS 里设 --bg-hue）。
- 别用
rgb()配合三个变量，维护成本高且易不同步 - 亮度（L）建议固定或线性变化，例如
calc(70% - var(--bg-hue) * 0.1%)，但注意 L 值不能低于 5% 或高于 98%，否则暗色模式下不可见 - 如果要 fallback 到老浏览器，JS 里加一层判断：
if (!CSS.supports('color', 'hsl(0 0% 0%)')) { document.body.style.backgroundColor = ... }
容易被忽略的兼容性与性能细节
IntersectionObserver 在 iOS Safari 12.2+ 才原生支持，微信 X5 内核默认禁用；而 rootMargin: '0px 0px -50% 0px' 在部分安卓 WebView 下会被忽略。这些不会报错，只会静默失效。
- 务必检测：
if ('IntersectionObserver' in window)，不支持时降级为getBoundingClientRect()+requestAnimationFrame轮询（仅限必要场景） - Observer 实例不要重复创建，一个页面共用一个，避免内存泄漏
- 更新 CSS 变量后，别在 callback 里再调
entry.target.classList.add()等 DOM 操作——把状态变更拆开，只做变量设置，样式由 CSS 自动响应
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
