使用React+Tailwind实现加载spinner时页面垂直跳动问题咨询

问题根因 #

• 核心触发原因是浏览器滚动锚定机制与CSS transform动画的冲突：Tailwind 内置的 animate-spin 动画通过 transform: rotate() 实现循环旋转，浏览器的滚动锚定功能会实时追踪视口内元素的位置偏移，动态调整滚动位置来保证用户浏览位置不变。当spinner完全进入视口后会被识别为滚动锚定候选元素，它的持续transform变换会被浏览器误判为页面内容发生了偏移，触发反复的滚动位置修正，最终表现为页面垂直跳动。这也完全匹配你提到的「仅spinner完全可见时触发、半露出时不触发」的特征。
• 次要关联点：外层容器的 h-full 适配问题：如果外层div的父容器未设置固定高度，h-full的实际高度由子元素撑开，内层带h-32的spinner会让外层容器高度固定为8rem，替换为文字后外层容器高度仅为文字行高大小，未触发布局偏移阈值，因此不会出现跳动。
• 该问题不属于React、Tailwind的原生bug，是浏览器默认行为的场景冲突。

修复方案 #

方案1：禁用spinner区域的滚动锚定（优先推荐） #

给包裹spinner的外层div添加overflow-anchor: none样式，直接禁止浏览器对该区域做滚动锚定计算，从根源阻断跳动触发逻辑。Tailwind v3.1及以上版本内置了overflow-anchor-none类，低版本可以自定义样式：

.no-scroll-anchor {
  overflow-anchor: none;
}

修改后代码示例：

{(this.state.profilesLoading || this.state.profilesPaginating) && (<div className="flex justify-center items-center h-full overflow-anchor-none">
    <div className="animate-spin rounded-full h-32 w-32 border-b-2 border-gray-900"></div>
</div>)}

方案2：提前预留spinner占位空间 #

不要通过条件渲染完全销毁/插入spinner容器，改为仅控制spinner的显隐，提前在页面中预留固定高度的占位区域，同时避免元素插入时的布局偏移和滚动锚定冲突：

<div className="flex justify-center items-center h-32">
  {(this.state.profilesLoading || this.state.profilesPaginating) && (
    <div className="animate-spin rounded-full h-32 w-32 border-b-2 border-gray-900"></div>
  )}
</div>

方案3：降级动画实现 #

如果前两个方案未生效，可以将基于transform的旋转动画替换为非transform属性实现，避免触发滚动锚定的位置计算：

@keyframes spin-alt {
  to { rotate: 360deg; }
}
.spin-alt {
  animation: spin-alt 1s linear infinite;
}

替换原有animate-spin类即可。

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