当页面中启用垂直滚动吸附（scroll-snap-type: y mandatory）时，若鼠标悬停在子容器内可滚动元素（如图片、iframe、自定义滚动区）上，浏览器会优先触发该子元素的滚动，导致父级滚动吸附失效；解决方案是通过 pointer-events: none 阻断子元素对滚轮事件的捕获，同时保留内容可见性与布局完整性。
当页面中启用垂直滚动吸附（scroll-snap-type: y mandatory）时，若鼠标悬停在子容器内可滚动元素（如图片、iframe、自定义滚动区）上，浏览器会优先触发该子元素的滚动，导致父级滚动吸附失效；解决方案是通过 `pointer-events: none` 阻断子元素对滚轮事件的捕获，同时保留内容可见性与布局完整性。
在实现全屏滚动吸附（full-page scroll snapping）时，一个常见却易被忽视的问题是：滚动行为意外被子元素“劫持”。例如，当用户将鼠标移至 、
根本原因在于：滚动事件的捕获遵循“目标元素优先”原则。即使子元素本身不可滚动（如普通
），只要其 CSS 中设置了 overflow: auto/scroll，或其内容自然溢出（如大图、长文本），浏览器就可能为其创建独立滚动上下文，并拦截 wheel 事件。而 Vue 单文件组件中 插入的内容（如 ）往往包含未加约束的交互元素，进一步加剧该问题。
✅ 正确解法不是增加 z-index（它不控制事件流）、也不是盲目设 overflow-y: hidden（可能裁剪内容或破坏布局），而是精准控制指针事件流向：
/* FullPage.vue 中的样式修正 */
.full-page {
scroll-snap-align: center;
height: 100vh;
width: 100vw;
box-sizing: border-box;
/* 关键修复：禁止子元素响应鼠标滚轮及点击事件 */
pointer-events: none;
}
⚠️ 注意事项：
- pointer-events: none 仅禁用鼠标事件（如 wheel, click, hover），不影响渲染、布局、焦点（tabindex）或键盘导航，因此文字仍可选中（若需禁用选中，额外加 user-select: none），表单控件等交互元素则需特殊处理；
- 若
内部存在必须响应点击的按钮或链接（如“向下滚动”箭头、菜单项），不能全局设 pointer-events: none。此时应采用分层策略： .full-page { pointer-events: none; } .full-page > * { pointer-events: auto; /* 恢复直接子元素的交互 */ } /* 或更精确地：仅对特定可点击元素启用 */ .full-page .interactive-trigger { pointer-events: auto; } - 在 Vue 中，确保
的根元素（即 ）是事件拦截的最外层容器，避免内容意外脱离该作用域（例如使用 v-html 或动态组件时需额外验证结构）。 ? 进阶建议：为提升可访问性，可配合监听键盘方向键/空格键，手动触发 scrollIntoView()，作为滚轮吸附的补充机制；同时建议为 .main-scroll-snap 添加 scroll-behavior: smooth，使吸附过渡更自然。
总结来说，pointer-events: none 是解决滚动吸附被子元素干扰的轻量、标准且高兼容性方案。它直击事件委托本质，在不破坏 DOM 结构与视觉表现的前提下，将滚轮控制权明确交还给滚动容器，是现代全屏滚动布局中值得纳入基础样式的“隐形守护者”。
