0

我正在尝试滚动捕捉到 Vue.js 3 中的组件。我可以让滚动捕捉与 vanilla HTML 和 CSS 一起正常工作。这是它的样子：滚动快照演示

我试图复制那个简单的布局，但使用 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 中，并给它类“容器”。出于某种原因，仅此一项还不够，该课程需要更多的风格才能发挥作用。这是该类的最终 CSS：

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

0 回答 0