滚动捕捉不适用于 Tailwind CSS 和 Vue.js/Nuxt.js

Question

我正在尝试在 Vue.js 项目中使用 Tailwind CSS 为我的英雄部分实现滚动捕捉。然而，即使在设置了滚动捕捉所需的 CSS 属性之后，它似乎也不起作用。

这是我的相关 CSS

tailwind.css

:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@import "../../node_modules/bootstrap-icons/font/bootstrap-icons.css";

body {
    @apply overflow-x-hidden;
    scroll-snap-type: y mandatory;
    height: 100vh; /* Tried adding this */
    overflow-y: scroll; /* Tried adding this */
}

.hero-snap-section {
    scroll-snap-align: start;
    height: 100vh;
}

以及来自

index.vue

的相关Vue模板：

<template>
    <!-- Main Content -->
    <main class="container p-4 mx-auto">
        <!-- First Hero Section -->
        <div class="container flex flex-col items-center gap-4 px-4 pt-4 mx-auto mt-4 md:grid md:grid-cols-6 lg:grid-cols-12 md:px-8 hero-snap-section">
            <!-- ... other content ... -->
        </div>
        <!-- ... other sections ... -->
    </main>
</template>

我已确保

hero-snap-section

类应用于我想要捕捉的部分。但是，当我滚动时，这些部分不会按预期对齐。

对于可能导致此问题的原因或如何解决它有什么想法吗？

---

我尝试将

height: 100vh;

和

overflow-y: scroll;

添加到我的

body

但没有任何改变。

我在 Chrome 和 Edge 上进行了测试。

完整的代码片段

<template>
    <!-- Main Content -->
    <main class="container p-4 mx-auto">
    
        <!-- First Hero Section -->
        <div class="container flex flex-col items-center gap-4 px-4 pt-4 mx-auto mt-4 md:grid md:grid-cols-6 lg:grid-cols-12 md:px-8 hero-snap-section">
            <!-- ... other content ... -->
        </div>
    
        <!-- Second Hero Section -->
        <section>
            <div
        class="container flex flex-col items-center gap-4 px-4 pt-4 mx-auto mt-4 md:flex-row md:grid md:grid-cols-6 lg:grid-cols-12 md:px-8 hero-snap-section">
            </div>
        </section>
    
         <!-- Third Hero Section -->
        <div class="container flex flex-col items-center gap-4 px-4 pt-4 mx-auto mt-4 md:grid md:grid-cols-6 lg:grid-cols-12 md:px-8 hero-snap-section">
            <!-- ... other content ... -->
        </div>
    
        <!-- Foruth Hero Section -->
        <section>
            <div
        class="container flex flex-col items-center gap-4 px-4 pt-4 mx-auto mt-4 md:flex-row md:grid md:grid-cols-6 lg:grid-cols-12 md:px-8 hero-snap-section">
            </div>
        </section>
    
    </main>
</template>

Answer 1

您需要将

scroll-snap-type

放在您想要滚动捕捉行为的部分的直接父级上。在本例中，它将是

<main>

元素：

main {
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    height: 100vh; /* Tried adding this */
    overflow-y: scroll; /* Tried adding this */
}

.hero-snap-section {
    scroll-snap-align: start;
    height: 100vh;
}

<script src="https://cdn.tailwindcss.com/3.3.3"></script>

<!-- Main Content -->
<main class="container p-4 mx-auto">

  <!-- First Hero Section -->
  <div class="container flex flex-col items-center gap-4 px-4 pt-4 mx-auto mt-4 md:grid md:grid-cols-6 lg:grid-cols-12 md:px-8 hero-snap-section bg-red-200">
    <!-- ... other content ... -->
  </div>

  <!-- Second Hero Section -->
  <section>
    <div class="container flex flex-col items-center gap-4 px-4 pt-4 mx-auto mt-4 md:flex-row md:grid md:grid-cols-6 lg:grid-cols-12 md:px-8 hero-snap-section bg-blue-200">
    </div>
  </section>

  <!-- Third Hero Section -->
  <div class="container flex flex-col items-center gap-4 px-4 pt-4 mx-auto mt-4 md:grid md:grid-cols-6 lg:grid-cols-12 md:px-8 hero-snap-section bg-green-200">
    <!-- ... other content ... -->
  </div>

  <!-- Foruth Hero Section -->
  <section>
    <div class="container flex flex-col items-center gap-4 px-4 pt-4 mx-auto mt-4 md:flex-row md:grid md:grid-cols-6 lg:grid-cols-12 md:px-8 hero-snap-section bg-yellow-200">
    </div>
  </section>

</main>