当主容器设为 height: 100vh 并启用 scroll-snap-type 时，Chrome 等浏览器可能因子元素的 position: fixed 导致指针事件拦截，使父容器失去滚动响应——关键解法是为固定定位子元素添加 pointer-events: none。
当主容器设为 `height: 100vh` 并启用 `scroll-snap-type` 时，chrome 等浏览器可能因子元素的 `position: fixed` 导致指针事件拦截，使父容器失去滚动响应——关键解法是为固定定位子元素添加 `pointer-events: none`。
在实现垂直分屏滚动（如全屏轮播式布局）时，常见做法是将 <main></main> 设置为 height: 100vh 并启用 scroll-snap-type: y mandatory，同时让每个子区块（如 <hero></hero>、<section></section>）也设为 height: 100vh 且声明 scroll-snap-align: start。该方案在 Safari 中通常表现良好，但在 Chrome、Edge 和 Firefox 中却常出现完全无法滚动的问题——即使 overflow: auto 已显式设置，鼠标滚轮或触摸拖拽均无响应。
根本原因往往被忽略：若 <logo></logo>、<hero></hero> 或其他子组件内部使用了 position: fixed（例如悬浮 Logo、吸顶导航栏、视差背景层等），这些元素会捕获并吞掉 pointer events（包括 wheel、touchstart 等滚动相关事件），导致滚动事件无法穿透至父级 <main></main> 容器，从而使其“失活”。
✅ 正确解决方案：
为所有 position: fixed 的子元素（或其直接包装容器）添加 pointer-events: none，并仅对需要交互的子元素（如按钮、链接）单独恢复事件：
/* page.module.css */
.main {
height: 100vh;
overflow-y: auto; /* 推荐明确写为 overflow-y */
scroll-snap-type: y mandatory;
-webkit-overflow-scrolling: touch; /* 提升 iOS 滚动流畅度 */
}
.section {
height: 100vh;
width: 100%;
display: flex;
align-items: center;
scroll-snap-align: start;
/* 注意：scroll-snap-type 不应在子项重复声明，避免嵌套干扰 */
}
/* 关键修复：针对 fixed 定位的覆盖层/装饰元素 */
.fixed-overlay,
.logo-fixed {
position: fixed;
pointer-events: none; /* 允许滚动事件穿透 */
z-index: 10;
}
/* 若其中包含可点击元素（如 logo 链接），需单独启用事件 */
.logo-fixed a {
pointer-events: auto;
}⚠️ 注意事项：
- 不要在
.section上重复设置scroll-snap-type: y mandatory—— 该属性只需在滚动容器（即.main）上声明一次； - 避免在
.main或.section上设置overflow: hidden或overscroll-behavior: none，否则会禁用原生滚动； - 若使用 React + CSS Modules，请确保类名正确注入，且无全局样式意外覆盖
pointer-events； - 可通过 Chrome DevTools 的 Rendering > Paint flashing 和 Layers 面板验证 fixed 元素是否遮挡滚动区域。
总结：100vh 分屏滚动失效并非 scroll-snap 兼容性缺陷，而多源于固定定位元素的事件劫持。通过精准控制 pointer-events 层级，即可在保留视觉效果的同时，彻底恢复跨浏览器滚动能力。
