Vue/Nuxt+Tailwind实现滚动吸附时如何避免额外滚动条？

问题分析 #

你遇到的核心矛盾是：

• 给body设置滚动吸附时，目标区块（hero-snap-section）不是body的直接子元素，导致吸附规则不生效；
• 给main设置滚动吸附时，main成为独立滚动容器，与body的滚动条重复，出现双滚动条；
• 需要保留Header -> Main -> Footer的层级，且仅main内的区块触发吸附，头部和尾部正常滚动。

解决方案：让body作为唯一滚动容器，调整层级触发吸附 #

利用CSS的display: contents让main的子元素直接继承父容器层级，成为body滚动容器的"有效子元素"，从而触发吸附规则，同时保持单滚动条。

1. 修改Tailwind 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，让body高度由内容自然撑开 */
}

.hero-snap-section {
  scroll-snap-align: start; /* 滚动到视口顶部时触发吸附 */
  height: 100vh; /* 每个吸附区块占满视口高度 */
}

/* 让main不生成独立盒子，子元素直接成为父容器的子元素 */
main {
  display: contents;
}

2. 调整页面结构（index.vue）

由于display: contents会让main的样式类失效，需要把main上的布局样式转移到内部包裹容器：

<template>
  <main>
    <!-- 用div承载原main的布局样式 -->
    <div class="container p-4 mx-auto">
      <div class="hero-snap-section">
        <!-- ... 你的区块内容 ... -->
      </div>
      <!-- ... 其他吸附区块 ... -->
    </div>
  </main>
</template>

3. 布局文件（default.vue）无需修改

保持原有的层级结构即可：

<template>
  <div class="min-h-screen bg-background">
    <Navbar />
    <Nuxt /> <!-- 渲染index.vue的内容 -->
    <footer class="bg-background">
      <!-- ... 底部内容 ... -->
    </footer>
  </div>
</template>

效果验证 #

• 整个页面仅显示body的滚动条，无额外滚动条；
• 滚动页面时，Header和Footer随内容正常滚动，不会触发吸附；
• 当hero-snap-section滚动到视口顶部时，会自动吸附停住，符合需求。

备选方案（兼容性优先） #

如果担心display: contents的浏览器兼容性，可以调整滚动容器到根布局的包裹div，同时隐藏body的滚动条：

/* 修改tailwind.css */
body {
  @apply overflow-x-hidden overflow-y-hidden; /* 隐藏body滚动条 */
}

.page-container {
  height: 100vh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
}

/* 给每个吸附区块的直接父元素设置scroll-snap-align: none，避免干扰 */
main {
  scroll-snap-align: none;
}

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

修改default.vue的根div类名：

<template>
  <div class="page-container bg-background">
    <Navbar />
    <Nuxt />
    <footer class="bg-background">
      <!-- ... 底部内容 ... -->
    </footer>
  </div>
</template>

此方案中，根div成为唯一滚动容器，body滚动条被隐藏，同样能实现单滚动条+区块吸附的效果，兼容性更好。

内容的提问来源于stack exchange，提问作者Joey Leo