本文介绍一种纯 CSS 与轻量 JavaScript 结合的方案，通过动态切换 scroll-snap-type 的启用状态，在前 N 个全屏区块启用 mandatory 滚动吸附，到达长内容区域后自动关闭吸附、恢复自然平滑滚动，无需复杂库或侵入式逻辑。

本文介绍一种纯 css 与轻量 javascript 结合的方案，通过动态切换 `scroll-snap-type` 的启用状态，在前 n 个全屏区块启用 `mandatory` 滚动吸附，到达长内容区域后自动关闭吸附、恢复自然平滑滚动，无需复杂库或侵入式逻辑。

在现代网页中，scroll-snap-type: y mandatory 是实现精准分页式滚动体验的利器，但其“强制对齐”特性也带来一个常见限制：一旦启用，整个容器内所有子元素都会被约束对齐，无法为长内容（如高度远超视口的

）保留自由滚动能力。纯 CSS 目前无法条件性地禁用滚动吸附（例如基于滚动位置或元素类名动态控制 scroll-snap-type），因此需借助极简 JavaScript 实现行为切换。

核心思路是：将滚动吸附逻辑解耦为“可开关”的样式规则。我们不再直接在 .snapper 上硬编码 scroll-snap-type，而是通过添加/移除特定类名（如 .smooth），配合 CSS 中的 :not(.smooth) 伪类选择器，动态启用或禁用吸附行为：

.snapper {
  overflow-y: scroll;
  max-height: 100vh;
  /* 仅当未添加 .smooth 类时才启用强制吸附 */
  scroll-snap-type: y mandatory;
}

.snapper.smooth {
  scroll-snap-type: none; /* 显式关闭吸附 */
}

.snapper > div {
  scroll-snap-align: start;
  display: flex;
  flex-flow: column;
  justify-content: center;
}

/* 前7个区块保持全屏高度，第8个（.longer）不参与高度约束 */
.snapper > div:not(.longer) {
  min-height: 100vh;
}

.longer {
  min-height: 500vh; /* 长内容，需自由滚动 */
}

对应的轻量 JavaScript 仅监听 wheel 事件，根据当前滚动位置（scrollTop）判断是否已到达长内容起始阈值（此处为 7 × viewportHeight），并实时切换类名：

const snapper = document.querySelector('.snapper');
const viewportHeight = window.innerHeight;

// 初始状态：启用吸附
snapper.classList.remove('smooth');

// 监听滚动，动态切换吸附状态
snapper.addEventListener('wheel', (e) => {
  // 当向下滚动且已越过第7个区块底部时，启用平滑模式
  if (e.deltaY > 0 && snapper.scrollTop >= viewportHeight * 7) {
    snapper.classList.add('smooth');
  }
  // 当向上滚动回到第7区块范围内时，恢复吸附
  else if (snapper.scrollTop  {
  // 视口变化时重置阈值计算（若需精确适配）
});

✅ 关键优势：

• 零侵入式 DOM 操作：不修改结构，仅操控类名；
• 高性能：wheel 事件处理极简，无节流/防抖亦足够流畅；
• 可配置性强：阈值（7）、类名（.smooth）、选择器均可按需调整；
• 渐进增强：即使 JS 失效，CSS 仍保持基础吸附（虽无法自动关闭，但不失功能）。

⚠️ 注意事项：

• 请确保 .snapper 容器本身具有明确的高度约束（如 max-height: 100vh）和 overflow-y: scroll，否则滚动事件无法触发；
• 若页面存在动态内容加载或高度变化，建议在更新后调用 snapper.scrollTo({ top: 0 }) 重置状态，避免阈值错位；
• 在 Safari 中，scroll-snap-type: none 可能需搭配 scroll-snap-stop: normal 确保完全解除约束（实测多数场景无需）。

最终效果：用户从前 7 个全屏区块间滚动时，会严格吸附至每个区块顶部；一旦滚入第 8 个长区块，吸附立即失效，后续滚动完全平滑，支持惯性、拖拽及任意像素级定位——完美兼顾引导性与自由度。