使用 Tailwind CSS 在 Vue.js/Nuxt.js 中滚动对齐会创建一个额外的滚动条

Question

我正在开发一个 Vue.js 项目，并尝试使用 Tailwind CSS 为我的英雄部分实现滚动捕捉。然而，虽然我可以让滚动捕捉工作，但它为

main

元素引入了一个额外的滚动条。我想要整个页面有一个滚动条来控制捕捉行为。

这是我的相关 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;
  overflow-y: scroll;
}

.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="hero-snap-section">
      <!-- ... other content ... -->
    </div>
    <!-- ... other sections ... -->
  </main>
</template>

我还有一个

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>

我已确保

hero-snap-section

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

为了引入快速滚动，我尝试了：

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

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

这可行，但它为我的

main

创建了第二个滚动条，这不是我想要的。

我已经在 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>

所需的滚动层次结构：

1. 标题（

   Navbar

   组件来自

   default.vue

   ）
2. 主要内容（

   <main>

   来自

   index.vue

   ）
   • 内容第 1 部分 (

     hero-snap-section

     )
   • 内容第 2 部分 (

     hero-snap-section

     )
   • 内容第 3 部分 (

     hero-snap-section

     )
   • ...
3. 页脚（

   footer

   来自

   default.vue

   ）
   • 时事通讯注册
   • 联系方式
   • ...

我希望整个页面有一个滚动条。滚动时，页面应捕捉到每个主要内容部分 (

hero-snap-section

)。页眉和页脚不应具有任何捕捉行为，但应成为整体可滚动内容的一部分。

关于如何在

main

部分上滚动对齐，同时为整个页面维护单个滚动条，有什么想法吗？或者这是不可能的？

---

Answer 1

您可以考虑将

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>