I'm working on a Vue.js project and trying to implement scroll snapping for my hero sections using Tailwind CSS. However, while I can get the scroll snapping to work, it introduces an additional scrollbar for the main element. I want a single scrollbar for the entire page that controls the snapping behavior.

我正在做一个Vue.js项目，并试图使用TailWind CSS为我的英雄部分实现滚动捕捉。然而，虽然我可以让滚动捕捉工作，但它为主元素引入了一个额外的滚动条。我想要一个单一的滚动条为整个页面，控制捕捉行为。

Here's the relevant CSS from my tailwind.css:

下面是来自我的trawind.css的相关的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;
  overflow-y: scroll;
}

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

And the relevant Vue template from index.vue:

和来自index.vue的相关Vue模板：

<template>
  <!-- Main Content -->
  <main class="container p-4 mx-auto">
    <!-- First Hero Section -->
    <div class="hero-snap-section">
      <!-- ... other content ... -->
    </div>
    <!-- ... other sections ... -->
  </main>
</template>

I also have a default.vue layout:

我还有一个default.vue布局：

<template>
  <div class="min-h-screen bg-background">
    <!-- Header -->
    <Navbar />
    <!-- Page Content -->
    <Nuxt />
    <!-- Footer -->
    <footer class="bg-background">
      <!-- ... footer content ... -->
    </footer>
  </div>
</template>

I've ensured that the hero-snap-section class is applied to the sections I want to snap to. However, when I scroll, the sections don't snap as expected.

我已经确保hero-snap-section类应用于我想要捕捉的部分。然而，当我滚动时，这些部分并没有像预期的那样对齐。

To introduce snap scrolling, I tried:

为了引入快速滚动功能，我尝试了一下：

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

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

This works, but it creates a second scrollbar for my main, which is not what I want.

这是可行的，但它为我的Main创建了第二个滚动条，这不是我想要的。

I've tested this on both Chrome and Edge. Here's a fuller code snippet for visualization:

我已经在Chrome和Edge上进行了测试。以下是更完整的可视化代码片段：

body {
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    height: 100vh;
    overflow-y: scroll;
}

.hero-snap-section {
    scroll-snap-align: start;
    height: 100vh;
    border: 1px solid red; /* For visualization */
}

<!-- Main Content -->
<main class="container p-4 mx-auto">
    <!-- First Hero Section -->
    <div class="hero-snap-section">
        <img src="https://res.cloudinary.com/dwgnjyezw/image/upload/e_improve,w_500,h_500,c_thumb,g_auto/v1693301320/samples/animals/three-dogs.jpg" alt="Banner Image">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum.</p>
    </div>
    <!-- Second Hero Section -->
    <div class="hero-snap-section">
        <img src="https://res.cloudinary.com/dwgnjyezw/image/upload/e_improve,w_500,h_500,c_thumb,g_auto/v1693301320/samples/animals/three-dogs.jpg" alt="Banner Image">
        <p>Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse id sem consectetuer libero luctus adipiscing.</p>
    </div>
    <!-- ... Repeat for other sections ... -->
</main>

Desired Scroll Hierarchy:

所需的滚动层次结构：

1. Header (Navbar component from default.vue)


2. Main Content (<main> from index.vue)
   
   
   
   • Content Section 1 (hero-snap-section)
   
   
   • Content Section 2 (hero-snap-section)
   
   
   • Content Section 3 (hero-snap-section)
   
   
   • ...
   
   
   
   


3. Footer (footer from default.vue)
   
   
   
   • Newsletter Signup
   
   
   • Contact Information
   
   
   • ...
   
   
   
   

I want the entire page to have a single scrollbar. When scrolling, the page should snap to each of the main content sections (hero-snap-section). The header and footer should not have any snapping behavior but should be part of the overall scrollable content.

我希望整个页面有一个单一的滚动条。滚动时，页面应对齐到每个主要内容部分(HERO-SNAP-SECTION)。页眉和页脚不应该有任何对齐行为，但应该是整个可滚动内容的一部分。

Any ideas on how to have scroll snapping on the main sections while maintaining a single scrollbar for the entire page, or is this not possible?

如何在主页面上滚动对齐，同时为整个页面保持一个滚动条，你有什么想法吗？

You could consider having the html element be the scroll container that has the scroll snapping. This would mean that any children could snap:

您可以考虑将html元素作为具有滚动对齐的滚动容器。这将意味着任何孩子都可以抓狂：

html {
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  height: 100vh;
  overflow-y: scroll;
}

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

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

<div class="min-h-screen bg-background">
  <!-- Header -->
  <Navbar>Navbar</Navbar>
  <!-- Page Content -->

  <!-- Main Content -->
  <main class="container p-4 mx-auto">
    <!-- First Hero Section -->
    <div class="hero-snap-section bg-red-200">
      <!-- ... other content ... -->
    </div>
    <div class="hero-snap-section bg-yellow-200">
      <!-- ... other content ... -->
    </div>
    <div class="hero-snap-section bg-green-200">
      <!-- ... other content ... -->
    </div>
    <!-- ... other sections ... -->
  </main>

  <!-- Footer -->
  <footer class="bg-background">
    <!-- ... footer content ... -->
  </footer>
</div>