本文介绍一种纯 CSS 与轻量 JavaScript 结合的方案，通过动态切换 scroll-snap-type 的启用状态，在前 N 个全屏区块启用 mandatory 滚动吸附，到达长内容区域后自动关闭吸附、恢复自然平滑滚动，无需复杂库或侵入式逻辑。
本文介绍一种纯 css 与轻量 javascript 结合的方案，通过动态切换 `scroll-snap-type` 的启用状态，在前 n 个全屏区块启用 `mandatory` 滚动吸附，到达长内容区域后自动关闭吸附、恢复自然平滑滚动，无需复杂库或侵入式逻辑。
在现代网页中， 核心思路是：将滚动吸附逻辑解耦为“可开关”的样式规则。我们不再直接在 对应的轻量 JavaScript 仅监听 ✅ 关键优势： ⚠️ 注意事项： 最终效果：用户从前 7 个全屏区块间滚动时，会严格吸附至每个区块顶部；一旦滚入第 8 个长区块，吸附立即失效，后续滚动完全平滑，支持惯性、拖拽及任意像素级定位——完美兼顾引导性与自由度。scroll-snap-type: y mandatory 是实现精准分页式滚动体验的利器，但其“强制对齐”特性也带来一个常见限制：一旦启用，整个容器内所有子元素都会被约束对齐，无法为长内容（如高度远超视口的 <div class="longer">）保留自由滚动能力。纯 CSS 目前无法条件性地禁用滚动吸附（例如基于滚动位置或元素类名动态控制 <code>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; /* 长内容，需自由滚动 */
}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 < viewportHeight * 7) {
snapper.classList.remove('smooth');
}
});
// 可选：兼容 touchmove 或键盘滚动（如需更鲁棒）
window.addEventListener('resize', () => {
// 视口变化时重置阈值计算（若需精确适配）
});
wheel 事件处理极简，无节流/防抖亦足够流畅； 7）、类名（.smooth）、选择器均可按需调整；
.snapper 容器本身具有明确的高度约束（如 max-height: 100vh）和 overflow-y: scroll，否则滚动事件无法触发； snapper.scrollTo({ top: 0 }) 重置状态，避免阈值错位； scroll-snap-type: none 可能需搭配 scroll-snap-stop: normal 确保完全解除约束（实测多数场景无需）。
