Vue.js/Nuxt.js中Tailwind CSS滚动吸附功能失效问题排查

核心问题分析 #

你的滚动吸附功能失效主要源于三个关键问题：

• 滚动容器高度未正确继承：仅给body设置height:100vh，但未同步设置html的高度，导致body的滚动容器无法完整覆盖视口。
• 容器间距破坏高度匹配：main的p-4内边距加上每个区块的mt-4外边距，使得每个吸附区块的实际占用高度超过100vh，直接打破滚动吸附的触发条件。
• 滚动容器层级冲突：body的滚动行为被内部main容器的样式干扰，导致滚动吸附规则无法正确传递到子元素。

具体修复步骤 #

1. 修正全局滚动容器样式 #

更新tailwind.css中的全局样式，确保滚动容器的高度和滚动属性正确生效：

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

html, body {
    @apply overflow-x-hidden h-full m-0 p-0;
}

body {
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
}

.hero-snap-section {
    scroll-snap-align: start;
    height: 100vh;
    @apply mt-0; /* 移除区块外边距，避免高度溢出 */
}

2. 调整页面容器与区块的间距 #

将main的内边距移到每个吸附区块内部，避免影响滚动容器的高度计算：

<template>
    <!-- Main Content -->
    <main class="container mx-auto">
        <!-- First Hero Section -->
        <div class="flex flex-col items-center gap-4 px-4 pt-4 md:grid md:grid-cols-6 lg:grid-cols-12 md:px-8 hero-snap-section">
            <!-- ... 其他内容 ... -->
        </div>
        <!-- Second Hero Section -->
        <section>
            <div class="flex flex-col items-center gap-4 px-4 pt-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="flex flex-col items-center gap-4 px-4 pt-4 md:grid md:grid-cols-6 lg:grid-cols-12 md:px-8 hero-snap-section">
            <!-- ... 其他内容 ... -->
        </div>
        <!-- Fourth Hero Section -->
        <section>
            <div class="flex flex-col items-center gap-4 px-4 pt-4 md:flex-row md:grid md:grid-cols-6 lg:grid-cols-12 md:px-8 hero-snap-section">
            </div>
        </section>
    </main>
</template>

3. 可选：改用main作为滚动容器（更可控） #

如果不想用body作为滚动容器，可以将滚动属性转移到main上，避免全局样式冲突：

/* 全局样式修改 */
html, body {
    @apply overflow-x-hidden h-full m-0 p-0;
}

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

.hero-snap-section {
    scroll-snap-align: start;
    height: 100vh;
    @apply mt-0;
}

验证方法 #

修复后可通过浏览器开发者工具检查：

• 确认html、body（或main）的高度为100vh，且overflow-y:scroll属性生效。
• 检查每个.hero-snap-section的高度严格等于100vh，无额外外边距导致高度溢出。

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