随滚动实现黑白渐变背景色切换：未滚动时背景非黑色问题

看起来你已经有了大致的思路，但初始未滚动时背景不是黑色的问题，主要是因为滚动进度的计算逻辑没在scrollTop为0时正确映射到黑色，加上可能缺少初始化执行的步骤。我来帮你修正并完善代码：

完整修复代码 #

// 处理滚动时的背景色渐变
function handleScroll() {
  const body = document.body;
  const html = document.documentElement;
  
  // 计算文档总高度（兼容不同浏览器的高度取值）
  const documentTotalHeight = Math.max(
    body.scrollHeight,
    body.offsetHeight,
    html.clientHeight,
    html.scrollHeight,
    html.offsetHeight
  );
  // 视口高度：用户当前能看到的页面高度
  const viewportHeight = window.innerHeight;
  // 可滚动的有效高度 = 文档总高度 - 视口高度（只有这部分是用户能滚动的范围）
  const scrollableTotal = documentTotalHeight - viewportHeight;
  
  // 获取当前滚动距离（兼容body/html两种滚动对象）
  const currentScroll = Math.max(body.scrollTop, html.scrollTop);
  // 计算滚动进度：0（顶部未滚动）到1（滚动到底部）
  const scrollProgress = scrollableTotal > 0 ? currentScroll / scrollableTotal : 0;
  
  // 从黑色(0,0,0)渐变到白色(255,255,255)，每个颜色通道线性计算
  const colorValue = Math.floor(scrollProgress * 255);
  document.body.style.backgroundColor = `rgb(${colorValue}, ${colorValue}, ${colorValue})`;
}

// 页面加载完成后立即执行一次，确保初始背景是黑色
window.addEventListener('DOMContentLoaded', handleScroll);
// 绑定滚动事件监听
window.addEventListener('scroll', handleScroll);

关键修复点说明 #

• 初始化执行：通过DOMContentLoaded事件在页面刚加载完就调用一次处理函数，直接把背景设为黑色，解决了未滚动时颜色不对的问题。
• 正确计算滚动范围：之前的代码可能没减去视口高度，导致滚动进度计算偏差——比如文档高度刚好等于视口高度时，滚动进度会被设为0，保持黑色而不会出错。
• 兼容性适配：同时获取body和html的滚动高度、距离，适配不同浏览器的滚动对象差异（有些浏览器是body滚动，有些是html）。
• 线性渐变映射：严格把滚动进度0对应黑色，进度1对应白色，中间的过渡色通过线性计算得到，保证渐变平滑自然。

额外优化建议 #

如果页面滚动时触发太频繁，你可以给滚动事件加个节流，减少函数执行次数，提升性能：

let throttleTimer;
function throttledScrollHandler() {
  clearTimeout(throttleTimer);
  throttleTimer = setTimeout(handleScroll, 16); // 约60帧的间隔，兼顾流畅度和性能
}
// 替换原来的滚动监听
window.addEventListener('scroll', throttledScrollHandler);

内容的提问来源于stack exchange，提问作者Harry Day