我正在尝试在Vue.js 3中滚动Snap到组件。我可以让滚动管理单元与香草HTML和CSS正确工作。它看起来像这样：Scroll Snap Demo
我试图复制这个简单的布局，但使用App.js作为容器，使用组件作为div。以下是App.vue中的外观：

<template class="container">
    <CompI class="snapAlign"/>
    <CompII class="snapAlign"/>
    <CompIII class="snapAlign"/>
    <CompIV class="snapAlign"/>
</template>

<script>
import CompI from './components/CompI.vue'
import CompII from './components/CompII.vue'
import CompIII from './components/CompIII.vue'
import CompIV from './components/CompIV.vue'

export default {
  name: 'App',
  components: {
    CompI,
    CompII,
    CompIII,
    CompIV
  }
}
</script>

<style>
*{
  margin: 0;
  padding: 0;
  text-align: center;
}
.container{
overflow-y: scroll;
scroll-snap-type: y mandatory;
}
.snapAlign{
scroll-snap-align: start;
}
</style>

这是我得到的组件，它们基本上彼此相同：

<template>
  <div class="one">
    <h1>One</h1>
  </div>
</template>

<script>
export default {
  name: 'CompI'
}
</script>

<style scoped>
.one{
  height: 100vh;
  width: 100vw;
  background-color: green;
}
</style>

我也试过使用vue-scroll-snap，但它在组件上的工作方式似乎不像指南中显示的那样在div上工作。这是我尝试的指南：Vue Scroll Snap Guide
以下是我使用该方法为App.vue所做的工作：

<template>
  <vue-scroll-snap >
    <CompI/>
    <CompII/>
    <CompIII/>
    <CompIV/>
  </vue-scroll-snap>
</template>

<script>
import CompI from './components/CompI.vue'
import CompII from './components/CompII.vue'
import CompIII from './components/CompIII.vue'
import CompIV from './components/CompIV.vue'

import VueScrollSnap from "vue-scroll-snap"

export default {
  name: 'App',
  components: {
    CompI,
    CompII,
    CompIII,
    CompIV,
    VueScrollSnap
  }
}
</script>

<style>
*{
  margin: 0;
  padding: 0;
  text-align: center;
}
</style>

组件与其他方法相同。
页面显示正确，但这两种尝试都没有滚动捕捉效果。我想尝试使用组件作为全屏元素来捕捉，应用程序将更好地扩展这样。
+解决方案
Ivo Gelov是正确的，从<template>中删除类，将组件放在div中，并给予它类“container”。出于某种原因，仅仅是不够的，更多的风格是需要对这个类，然后它的工作。下面是这个类的最终CSS：

.container{
    width: 100%;
    height: 100vh;
    margin: 0 auto;
    overflow-x: hidden;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
}