Tailwind CSS snap-y部署Vercel后刷新初始位置随机问题求助

问题原因 #

部署后页面刷新时随机显示不同区块，本质是页面加载时图片资源未完全加载，导致滚动容器及子元素的高度计算偏差，Tailwind的snap-y吸附逻辑基于初始渲染的高度计算，加载完成后高度变化打破了吸附定位；同时部分子元素缺少必要的吸附类和明确高度，加剧了这个问题。

解决方案 #

1. 修正拼写错误并统一子元素的吸附类和高度 #

代码里的shirnk-0是拼写错误，改为shrink-0；给所有需要参与滚动吸附的子元素添加snap-start或snap-center，同时强制设置h-screen（或对应区块的固定高度），确保每个区块的高度在加载前后一致：

<div class="snap-y h-screen w-screen overflow-scroll">
    <!-- 头部区块：修正拼写 + 明确高度 -->
    <div class="snap-start shrink-0 relative h-screen">
      <img src="./new/header.png" class="w-full h-full object-cover"></img>
      <IconContext.Provider value={{style:{ color: "rgb(236,236,236)", position:"absolute", width:"10rem", height:"10rem", top:"55%", left:"25%"}}}>
        <div >
          <TbChevronsDown class="animate-bounce"/>
        </div>
      </IconContext.Provider>
    </div>
    <!-- 过渡区块：添加吸附类 + 明确高度 -->
    <div id="cursor-halo" class="snap-start shrink-0 bg-black w-full h-screen">
      <img src="./new/transition.png" class="object-cover w-full h-full js-show-on-scroll"></img>
    </div>
    <!-- 后续所有区块统一处理 -->
    <div class="snap-start shrink-0 h-screen">
      <img src="./new/main-bg-1-rebel-cause.gif" class="object-cover w-full h-full"></img>
      <Link href="https://mobile.twitter.com/FruitpunkCC_nft">
          <AiFillTwitterCircle class="cursor-pointer fixed w-20 h-20 top-1/3 right-0 z-10"/>
      </Link>
    </div>
    <div class="snap-start shrink-0 h-screen">
      <img src="./new/main-bg-2-eternity.gif" class="object-cover w-full h-full "></img>
    </div>
    <div class="snap-start shrink-0 relative flex justify-center h-screen">
      <img src="./new/main-bg-3-team-cards.jpg" class="object-cover w-full h-full"></img>
        <img src="./new/tc_left_btn.png" class="shadow-xl dark:shadow-gray-800 cursor-pointer absolute mt-40 w-30 h-60 left-10" onClick={onChangeTMCardLeft}></img>
        <img src={""./new/team-card-".concat(curTeamMember,".png")} class="absolute max-w-4xl h-auto z-0"></img>
        <img src="./new/tc_right_btn.png" class="cursor-pointer absolute mt-40 w-30 h-60 right-10" onClick={onChangeTMCardRight}></img>
    </div>
    <div class="snap-start shrink-0 h-screen">
      <img src="./new/footnote.png" class="object-cover w-full h-full"></img>
    </div>
  </div>

2. 页面加载后强制滚动到顶部 #

在组件挂载（React项目）或页面加载完成时，添加JavaScript代码强制滚动到顶部，确保每次刷新都从第一个区块开始：

如果是React函数组件，在useEffect中执行：

useEffect(() => {
  window.scrollTo(0, 0);
}, []);

如果是纯HTML页面，在script标签中添加：

window.addEventListener('load', () => {
  window.scrollTo(0, 0);
});

3. 优化图片加载（可选） #

给图片添加loading="lazy"或者预加载关键图片，减少页面加载时的高度波动：

<img src="./new/header.png" class="w-full h-full object-cover" loading="eager"></img>

核心原理 #

• 明确子元素高度避免加载前后布局偏移，让snap-y的吸附逻辑基于稳定的容器尺寸计算；
• 强制滚动到顶部确保刷新后初始位置固定，不会因为资源加载顺序导致滚动位置异常。

内容的提问来源于stack exchange，提问作者w berry