本文详解如何在启用 css `scroll-snap-type` 的前提下，通过 intersectionobserver 驱动 body 背景色的平滑过渡，解决因 `height: 100vh` 限制导致的 scroll-snap 与 transition 冲突问题。

在构建具有视差感和沉浸式体验的单页网站时，开发者常希望结合两项关键特性：滚动吸附（Scroll Snap） 提供精准、可控的分屏浏览体验；以及背景色渐变过渡（Background Transition） 增强视觉连贯性。但如你所遇，直接为 ain> 设置 height: 100vh 可使 scroll-snap-type: y mandatory 生效，却会破坏 body 的背景色过渡——因为此时 body 高度被内容撑开，而 main 成为实际滚动容器，body 不再随滚动“变化”，导致 background-color 的 CSS transition 失效。

根本原因在于：CSS 过渡必须作用于发生样式变更的元素本身，且该变更需由浏览器重绘触发。你原先用 jQuery 监听 window.scroll 并动态切换 body 类名，逻辑正确，但当 main 拥有固定高度并接管滚动时，window.scrollY 实际反映的是 main 内部滚动位置，而 body 自身并未滚动，其 scrollTop 始终为 0 —— 这使得基于 $(window).scrollTop() 的判断失效，body 类名无法及时更新，过渡自然中断。

✅ 正确解法是：将滚动状态感知逻辑统一收束至 IntersectionObserver，并直接驱动 body 的 class 切换。它不依赖滚动事件或元素位置计算，而是基于浏览器原生的可见性检测，精准、高效、且与 scroll-snap 完全兼容。

以下是优化后的核心 JavaScript（移除 jQuery 依赖，更轻量可靠）：

const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      const panel = entry.target;
      const colorClass = `color-${panel.dataset.color}`;

      if (entry.isIntersecting) {
        // 当前 panel 进入视口：添加对应背景色类
        document.body.classList.add(colorClass);
      } else {
        // 离开视口：移除该类（保留其他可能存在的 color- 类需谨慎）
        document.body.classList.remove(colorClass);
      }
    });
  },
  {
    threshold: 0.1 // 提前 10% 触发，提升过渡顺滑度
  }
);

// 观察所有 .panel 元素（而非 .hidden），确保背景色与面板吸附同步
document.querySelectorAll('.panel').forEach((panel) => {
  observer.observe(panel);
});

对应的关键 CSS 调整如下：

/* 移除 main 的 height: 100vh！让其自然包裹子元素 */
main {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  /* ✅ 删除 height: 100vh; —— 这是冲突根源 */
  /* 推荐添加：防止滚动跳变 */
  scroll-behavior: smooth;
}

/* 为每个 panel 添加 scroll-snap-stop，确保快速滚动时仍能逐帧吸附 */
.panel {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  scroll-snap-align: start;
  scroll-snap-stop: always; /* ? 关键！解决移动端“跳屏”问题 */
}

/* body 背景过渡必须定义在 body 上，且 transition 属性不可省略 */
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background-color: rgb(36, 164, 138); /* 初始色 */
  transition: background-color 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* 更柔和的缓动 */
}

/* 各背景色类（保持不变） */
.color-green { background-color: rgb(36, 164, 138); }
.color-red   { background-color: rgb(211, 79, 79); }
.color-blue  { background-color: rgb(67, 91, 175); }
.color-salmon{ background-color: lightsalmon; }

? 重要注意事项：

• 不要混合使用 window.scroll 和 IntersectionObserver：前者在 scroll-snap 场景下易失准，后者才是现代、声明式的最佳实践。
• 观察目标应为 .panel，而非 .hidden：.hidden 是子元素动画控制层，.panel 才是 scroll-snap 的锚点和视觉区块主体。
• scroll-snap-stop: always 是移动端体验保障：避免用户快速滑动时跳过中间面板，强制每次只吸附一个。
• transition-timing-function 建议使用 cubic-bezier：比 ease 更可控，推荐 cubic-bezier(0.25, 0.46, 0.45, 0.94)（类似 iOS 弹性回弹）。

最终，你的 HTML 结构无需改动，仅需替换 JS 逻辑与精简 CSS，即可实现：✅ 精准 scroll-snap 吸附 + ✅ 流畅背景色淡入淡出 + ✅ 响应式友好 + ✅ 无 jQuery 依赖。这不仅解决了当前问题，也为后续扩展（如视差文字、SVG 动画等）打下坚实基础。