网页滚动切换背景：纯色正常渐变无平滑过渡的问题求解

你遇到的核心问题是：浏览器无法在纯色背景值和渐变背景值之间生成过渡动画——这俩属于不同的CSS数据类型，transition属性只能在同类型的属性值之间计算插值，所以切换到渐变类时会直接跳过过渡效果。

下面提供两种比叠加div更优雅的解决方案：

方案1：双层背景过渡法（兼容性强） #

思路是给body设置两层背景：底层用纯色变量做过渡，上层用渐变变量，通过控制渐变层的透明度实现平滑切换。不管是纯色还是渐变场景，都能保证过渡连贯。

修改后的代码：

body {
  transition: background-color 1s ease-out, opacity 1s ease-out;
  /* 底层纯色，上层渐变默认隐藏 */
  background-color: var(--bg-solid, green);
  background-image: var(--bg-gradient, none);
}

.primary {
  --bg-solid: green;
  --bg-gradient: none;
}

.secondary {
  --bg-solid: red;
  --bg-gradient: none;
}

.tertiary {
  --bg-solid: orange; /* 用渐变起始色做底层，过渡更自然 */
  --bg-gradient: linear-gradient(to right, orange 0%, blue 100%);
}

div {
  height: 400px;
  width: 100%;
}

const sections = document.querySelectorAll('div[data-color]');
let currentActiveClass = '';

document.addEventListener("scroll", () => {
  sections.forEach((section) => {
    const rect = section.getBoundingClientRect();
    // 用视口高度判断元素是否进入触发区域，比scrollTop更准确
    const isInView = rect.top <= window.innerHeight * 0.25;
    if (isInView) {
      const targetClass = section.dataset.color;
      if (targetClass !== currentActiveClass) {
        document.body.classList.remove(currentActiveClass);
        document.body.classList.add(targetClass);
        currentActiveClass = targetClass;
      }
    }
  });
});

HTML无需修改。

方案2：使用CSS @property定义可动画渐变（现代浏览器） #

如果只需要兼容现代浏览器，可以用@property自定义可动画的渐变属性，让浏览器直接在渐变之间计算过渡插值。

修改后的代码：

/* 定义可动画的渐变变量 */
@property --bg-gradient {
  syntax: '<gradient>';
  inherits: false;
  initial-value: linear-gradient(to right, green, green);
}

body {
  transition: --bg-gradient 1s ease-out;
  background: var(--bg-gradient);
}

.primary {
  --bg-gradient: linear-gradient(to right, green, green); /* 用同色渐变模拟纯色 */
}

.secondary {
  --bg-gradient: linear-gradient(to right, red, red);
}

.tertiary {
  --bg-gradient: linear-gradient(to right, orange 0%, blue 100%);
}

div {
  height: 400px;
  width: 100%;
}

JS沿用方案1中的优化版本即可。

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