当页面启用垂直滚动吸附（scroll-snap-type: y mandatory）时，若鼠标悬停在子元素（如图片、按钮等）上，滚动事件常被子元素捕获而中断吸附行为；通过为子容器设置 pointer-events: none 并合理恢复交互区域，可彻底修复该问题。
当页面启用垂直滚动吸附（scroll-snap-type: y mandatory）时，若鼠标悬停在子元素（如图片、按钮等）上，滚动事件常被子元素捕获而中断吸附行为；通过为子容器设置 pointer-events: none 并合理恢复交互区域，可彻底修复该问题。
在实现全屏滚动吸附（Full-page Scroll Snap）时，一个常见却易被忽视的问题是：滚动行为仅在鼠标位于空白背景区域时生效，一旦移入 <FullPage> 内部的任意可交互或非透明元素（例如 <img>、<button>、甚至带 background-color 的 <div>），滚动便失效或变得不连贯。其根本原因并非 overflow 或 z-index 设置错误，而是浏览器将滚动事件的捕获权交给了最上层的、具有默认 pointer-events: auto 的子元素——即使该元素本身不可滚动，它仍会“吞掉”滚轮/触控板事件，导致父级 .main-scroll-snap 无法接收到滚动输入。
✅ 正确解法：精准控制 pointer-events
核心方案是：在 .full-page 容器上禁用指针事件传递，同时为真正需要交互的子组件显式启用。这既保留滚动穿透性，又不牺牲功能可用性。
✅ 修改 FullPage.vue 样式如下：
.full-page {
scroll-snap-align: center;
height: 100vh;
width: 100vw;
box-sizing: border-box;
/* 关键：禁用整个容器的指针事件，使滚动穿透到父级 */
pointer-events: none;
}✅ 同时，在需要响应点击、悬停等操作的子组件中（如 FirstPage.vue 中的按钮、菜单项等），显式恢复交互能力：
<!-- FirstPage.vue 示例 -->
<template>
<div class="first-page-content">
<h1>Welcome</h1>
<!-- 此按钮需可点击 → 主动启用 pointer-events -->
<button class="cta-button">Get Started</button>
<img
src="/hero.jpg"
alt="Hero"
class="hero-image"
/>
</div>
</template>
<style scoped>
.first-page-content {
/* 确保内容区不继承父级 pointer-events: none */
pointer-events: auto;
}
.cta-button,
.hero-image {
/* 单独元素也可精细控制 */
pointer-events: auto;
}
</style>⚠️ 注意事项：
- ❌ 不要对 .full-page 使用 overflow-y: hidden 来“压制”子元素滚动——它无法阻止滚轮事件被捕获，且可能隐藏必要内容；
- ❌ 避免滥用 z-index：z-index 控制层叠顺序，与事件捕获链无关，对滚动穿透无效；
- ✅ 若子组件含内嵌滚动区域（如卡片列表、横向滑块），应将其设为 pointer-events: auto，并确保其自身具备 overflow-x: auto 和 scroll-snap 相关属性，实现嵌套滚动隔离；
- ✅ 在移动端，还需确认 touch-action: pan-y 是否被意外覆盖（尤其在使用第三方 UI 库时），必要时可在 .main-scroll-snap 上显式声明：touch-action: pan-y;。
✅ 最终效果验证
- 鼠标置于任意 <FullPage> 内容区域（文字、图片、空隙）→ 滚轮/触控板触发父级吸附滚动；
- 点击按钮、链接或表单控件 → 事件正常响应（因已显式设为 pointer-events: auto）；
- 移动端上下滑动 → 流畅吸附，无卡顿或中断。
此方案轻量、标准兼容性好（Chrome/Firefox/Safari 均支持 pointer-events），且不依赖 JavaScript 事件代理或防抖逻辑，是解决 Scroll Snap 被子元素劫持问题的首选 CSS 级解决方案。
立即学习“前端免费学习笔记（深入）”；
