子元素覆盖scroll snapping效果：滚动失效问题求助

你遇到的问题是因为子元素（比如图片）自身具备滚动能力，当鼠标在其上滚动时，浏览器优先触发子元素的滚动行为，而非主容器的滚动吸附。以下是两种可行的解决方案：

方案一：转发子元素滚动事件到主容器（推荐） #

通过JavaScript拦截子元素的滚动事件，直接将滚动行为转发给主容器，同时保留子元素的其他交互能力。在FullPage.vue中添加脚本部分：

<script>
export default {
  mounted() {
    const container = this.$el;
    // 拦截容器内的滚轮事件
    container.addEventListener('wheel', (e) => {
      e.stopPropagation();
      // 让主容器执行滚动
      document.querySelector('.main-scroll-snap').scrollBy(0, e.deltaY);
    }, { passive: false });
  }
}
</script>

方案二：CSS禁用子元素指针滚动（适合无交互需求场景） #

如果子元素仅作展示、不需要任何点击/交互操作，可以直接用CSS禁用其指针事件，让滚动事件直接穿透到主容器：

.full-page * {
  pointer-events: none;
}

若子元素内有按钮、链接等需要交互的元素，单独给这些元素恢复指针事件即可：

.full-page button, .full-page a {
  pointer-events: auto;
}

补充说明 #

你之前尝试的overflow-y: hidden仅作用于FullPage容器本身，无法阻止内部子元素的滚动行为；z-index只影响元素层级，不改变事件触发优先级，因此无效。另外也可以检查FirstPage组件内的元素，比如图片是否设置了overflow: auto/scroll，若有直接移除该属性也能解决部分问题。

内容的提问来源于stack exchange，提问作者thawyn