我正在开发一个带有滚动捕捉功能的网站。我对网络开发还是个新手。下面是我的App.vue的代码，我在这里初始化了snapping：

<template>
  <div>
    <div class="main-scroll-snap" @scroll="handleScroll">
      <Menu/>
      <FullPage>
        <FirstPage :scroll-pos="scrollY"/>
      </FullPage>
      <FullPage>Test2</FullPage>
      <FullPage>Test3</FullPage>
      <FullPage>Test4</FullPage>
    </div>
  </div>
</template>

<style scoped>

.main-scroll-snap {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

</style>

字符串
所以FullPage.vue基本上就是这样的：

<template>
  <div class="full-page">
    <slot></slot>
  </div>
</template>

<style scoped>

.full-page {
  scroll-snap-align: center;

  overflow-y: hidden;

  height: 100vh;
  max-height: 100vh;
  width: 100vw;
  box-sizing: border-box;
}

</style>

型
我的问题是，每当我的鼠标在FullPage内部的一个元素上时（例如，FirstPage.vue，如App.vue中所见），滚动捕捉的滚动效果就会被这个元素覆盖，页面的滚动不再发生。因此，如果我把鼠标放在一个图像上，并试图滚动，它不会工作，因为它试图滚动图像。但是如果我把它放在背景上，它就会正确地滚动和捕捉，就像main-scroll-snap标签中所说的那样。
box-sizing: border-box;是chatgpt解决这个问题的一个尝试，当然，这不起作用。我怎样才能使这些元素不覆盖App.vue中主div的滚动呢？
我尝试在main-scroll-snap CSS中添加一个z-index: 100;，但它没有改变任何东西。我也试过在FullPage上使用overflow-y: hidden;，但它没有改变任何东西。