当页面中启用垂直滚动吸附（scroll-snap-type: y mandatory）时，若鼠标悬停在子容器内（如图片、按钮等可交互元素），滚动事件会被子元素捕获，导致父级滚动吸附失效；解决方案是为子容器设置 pointer-events: none，同时对需保留交互的内部元素显式恢复 pointer-events: auto。
当页面中启用垂直滚动吸附（scroll-snap-type: y mandatory）时，若鼠标悬停在子容器内（如图片、按钮等可交互元素），滚动事件会被子元素捕获，导致父级滚动吸附失效；解决方案是为子容器设置 `pointer-events: none`，同时对需保留交互的内部元素显式恢复 `pointer-events: auto`。
在基于 CSS Scroll Snap 构建全屏滚动页面（如单页产品介绍、引导页）时，一个常见却容易被忽视的问题是：滚动吸附行为在鼠标位于子元素区域时意外中断。例如，你已正确为 .main-scroll-snap 设置了 scroll-snap-type: y mandatory，各 FullPage 子项也设置了 scroll-snap-align: center，但一旦鼠标移入 <FirstPage> 中的图片、文字或任何非空白区域，滚轮/触控板就不再触发父容器的吸附滚动——这是因为默认情况下，子元素会捕获并消费 wheel、touchmove 等滚动相关事件，从而阻止其向上传播至滚动容器。
根本原因在于：滚动事件的捕获与传递遵循 DOM 事件流机制，而可交互元素（如 <img>、<button>、带 cursor: pointer 的 <div>）天然具有 pointer-events: auto，会响应指针操作，进而干扰原生滚动行为。
✅ 正确解法是使用 CSS 的 pointer-events 属性进行精准控制：
- 将 FullPage 容器设为 pointer-events: none，使其完全不响应任何指针事件（包括滚动触发），确保所有滚轮/触摸操作直接作用于外层 .main-scroll-snap；
- 对容器内需要保持交互功能的子元素（如导航按钮、表单控件、可点击卡片等），显式重置为 pointer-events: auto。
以下是优化后的 FullPage.vue 样式代码：
<template>
<div class="full-page">
<slot></slot>
</div>
</template>
<style scoped>
.full-page {
scroll-snap-align: center;
height: 100vh;
width: 100vw;
/* 关键修复：禁用容器自身指针事件 */
pointer-events: none;
/* 可选：确保内容不溢出影响布局 */
overflow: hidden;
box-sizing: border-box;
}
/* 恢复内部可交互元素的事件响应能力 */
.full-page *:not(.full-page) {
pointer-events: auto;
}
/* 或更稳妥地，为特定组件类单独设置（推荐） */
.full-page .interactive-btn,
.full-page .clickable-card,
.full-page input,
.full-page button {
pointer-events: auto;
}
</style>⚠️ 注意事项：
- ❌ 不要仅对 .full-page 设置 z-index 或 overflow: hidden —— 这些属性不影响事件捕获逻辑，无法解决根本问题；
- ❌ 避免全局使用 * { pointer-events: auto } 覆盖，易引发样式污染和不可预期的行为；
- ✅ 推荐采用“白名单”策略：默认禁用容器事件，再按需为具体交互组件开启，兼顾健壮性与可维护性；
- ? 若使用 Vue 3 + <script setup>，注意 scoped 样式下深度选择器（如 :deep(.btn)）可配合使用，确保子组件内样式生效；
- ? 测试建议：在不同设备（桌面滚轮、触控板、移动端 touch）下验证滚动是否连续吸附，并确认关键按钮/链接仍可点击。
通过这一方案，你既能享受 CSS Scroll Snap 带来的丝滑全屏切换体验，又能保障页面内功能性交互不受影响——真正实现「滚动归滚动，点击归点击」的职责分离。
