如何解决背景滚动变色脚本运行时的Background is null报错？

问题根源 #

你看到的“Background is null”错误，是因为代码中调用了scroll([0, 208, 255], '.background2', 500)，但当前页面里不存在class为background2的元素，document.querySelector('.background2')返回null，当滚动事件触发时，尝试访问null的style属性就会抛出错误。

解决方案 #

1. 匹配页面元素调整函数调用 #

根据每个HTML页面实际存在的元素，只调用对应selector的scroll方法：

• 如果页面只有.background1元素，就注释掉针对.background2的调用；
• 如果两个HTML页面分别对应不同背景元素，分开编写脚本或在脚本中判断元素存在性后再执行。

2. 在函数内增加元素存在性校验 #

修改scroll函数，先判断目标元素是否存在，不存在则直接终止函数，避免报错：

document.addEventListener('DOMContentLoaded', function(event) {
  const scroll = (color, selector, offset) => {
    const [red, green, blue] = color;
    const background = document.querySelector(selector);
    // 元素不存在则直接返回，不绑定滚动事件
    if (!background) return;
    window.addEventListener('scroll', () => {
      const y = 1 + (window.scrollY || window.pageYOffset) / offset;
      const [r, g, b] = [red/y, green/y, blue/y].map(Math.round);
      background.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
    });
  };
  // 仅调用页面存在元素对应的scroll方法
  scroll([255, 255, 255], '.background1', 250);
  // 若当前页面无.background2，注释此行
  // scroll([0, 208, 255], '.background2', 500);
});

优化建议 #

1. 添加滚动防抖，提升性能 #

滚动事件触发频率极高，直接绑定处理函数会导致频繁计算，添加防抖函数可减少计算次数，优化页面性能：

// 防抖工具函数：延迟执行，避免高频触发
const debounce = (func, delay = 16) => {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), delay);
  };
};

document.addEventListener('DOMContentLoaded', function(event) {
  const scroll = (color, selector, offset) => {
    const [red, green, blue] = color;
    const background = document.querySelector(selector);
    if (!background) return;
    // 用防抖包装滚动处理函数
    const handleScroll = debounce(() => {
      const y = 1 + (window.scrollY || window.pageYOffset) / offset;
      const [r, g, b] = [red/y, green/y, blue/y].map(Math.round);
      background.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
    });
    window.addEventListener('scroll', handleScroll);
  };
  scroll([255, 255, 255], '.background1', 250);
});

2. 优化背景元素样式，确保可见性 #

当前.background1未设置定位和高度，可能无法看到背景效果，建议设置全屏固定定位：

.background1 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(255,255,255);
  z-index: -1; /* 避免遮挡页面其他内容 */
}

3. 统一初始样式与JS逻辑 #

可以在scroll函数开头用JS设置初始背景色，避免CSS和JS的颜色值不一致：

const scroll = (color, selector, offset) => {
  const [red, green, blue] = color;
  const background = document.querySelector(selector);
  if (!background) return;
  // 用JS设置初始背景色，与滚动逻辑统一
  background.style.backgroundColor = `rgb(${red}, ${green}, ${blue})`;
  // ...后续滚动处理逻辑
};

4. 提升代码可维护性 #

如果多个页面需要类似效果，可以将scroll函数封装为独立模块，通过配置数组批量初始化，比如：

const scrollConfigs = [
  { color: [255, 255, 255], selector: '.background1', offset: 250 },
  { color: [0, 208, 255], selector: '.background2', offset: 500 }
];

scrollConfigs.forEach(config => scroll(config.color, config.selector, config.offset));

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