页面滚动背景变色效果在Chrome失效，求排查与修复方案

我来帮你分析下问题所在，以及对应的修复方案：

问题根源：浏览器对scrollTop的宿主元素处理不一致 #

不同浏览器对于页面滚动距离的存储位置有差异：

• 在Chrome中，页面的滚动距离是存在document.documentElement（也就是<html>标签）的scrollTop属性里的，document.body.scrollTop会始终返回0；
• 而在Safari中，滚动距离则是存在document.body.scrollTop中，html.scrollTop反而为0。

这就解释了为什么你最初的代码在Safari正常、Chrome失效，改成用html.scrollTop后Safari又失效的矛盾情况——你只适配了其中一种浏览器的规则。

修复方案：兼容两种滚动距离获取方式 #

我们需要同时获取body和html的scrollTop，取有效的那个值；同时还要处理页面内容未超过可视高度的边界情况（避免出现除以0的错误）。修改后的代码如下：

function updateBackgroundColorOnScroll() {
  const body = document.body;
  const html = document.documentElement;
  
  // 兼容获取正确的滚动距离：取body和html中不为0的那个值
  const scrollTop = Math.max(body.scrollTop, html.scrollTop);
  
  // 计算可滚动的总高度：取最大的内容高度减去可视区域高度
  const totalScrollableHeight = Math.max(body.scrollHeight, html.scrollHeight) - Math.min(body.clientHeight, html.clientHeight);
  
  // 处理内容未超出可视区域的情况，避免除以0
  if (totalScrollableHeight === 0) {
    body.style.backgroundColor = "rgb(0, 0, 0)";
    return;
  }
  
  // 计算灰度值并设置背景色
  const grayValue = Math.round((scrollTop / totalScrollableHeight) * 255);
  body.style.backgroundColor = `rgb(${grayValue}, ${grayValue}, ${grayValue})`;
}

// 绑定滚动事件
window.addEventListener('scroll', updateBackgroundColorOnScroll);

额外优化：避免滚动事件频繁触发 #

滚动事件会在滚动过程中频繁触发，可能导致轻微卡顿。你可以用requestAnimationFrame来做性能优化，让代码在浏览器重绘前执行：

let isTicking = false;
function updateBackgroundColorOnScroll() {
  if (!isTicking) {
    window.requestAnimationFrame(() => {
      const body = document.body;
      const html = document.documentElement;
      const scrollTop = Math.max(body.scrollTop, html.scrollTop);
      const totalScrollableHeight = Math.max(body.scrollHeight, html.scrollHeight) - Math.min(body.clientHeight, html.clientHeight);
      
      if (totalScrollableHeight === 0) {
        body.style.backgroundColor = "rgb(0, 0, 0)";
        isTicking = false;
        return;
      }
      
      const grayValue = Math.round((scrollTop / totalScrollableHeight) * 255);
      body.style.backgroundColor = `rgb(${grayValue}, ${grayValue}, ${grayValue})`;
      
      isTicking = false;
    });
    isTicking = true;
  }
}

window.addEventListener('scroll', updateBackgroundColorOnScroll);

这样修改后，你的滚动背景变色效果应该能在Chrome、Safari以及Atom预览器中都正常工作了。

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