Next.js中Tailwind CSS的Scroll snapping功能失效问题求助

你的滚动捕捉功能没生效，核心问题是滚动容器缺少高度限制与滚动属性，同时子元素高度不足。按以下步骤修改即可：

• 给根div添加h-screen overflow-y-auto，让容器固定为视口高度，内容超出时允许垂直滚动——这是触发滚动捕捉的必要前提
• 给每个section添加h-screen，确保每个区块占满整个视口高度，滚动时才会触发snap-center的捕捉效果

修改后的代码：

import Head from 'next/head'
import Hero from '../components/Hero'
import About from '../components/About'

export default function Home() {
  return (
    <>
      <Head>
        <title>Portfolio | name</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <div className='bg-[#fff] snap-y snap-mandatory h-screen overflow-y-auto'>
        <section className='snap-center h-screen'>
          <Hero/>
        </section>

        <section className='snap-center h-screen'>
          <About/>
        </section>
      </div>
    </>
  )
}

另外把<Head>移到根div外更合理，Next.js的Head组件最终会渲染到页面<head>标签中，放在根div里不影响功能，但结构更清晰。

内容的提问来源于stack exchange，提问作者prog-pog