Tailwind CSS中overflow-hidden在动画场景下失效问题排查

我使用Next.js搭配Tailwind CSS实现图片位移动画时，遇到了一个问题：当图片移动超出屏幕范围时，页面会出现滚动条。我尝试在父元素上添加overflow-hidden属性，但并未生效。以下是相关代码片段及问题截图：

相关代码片段 #

page.js #

<main className="flex min-h-screen items-center">
      <div className="container mx-auto flex">
        <div className="z-50 w-1/2">
          <h1 className="m-0 p-0 text-9xl">
            <span>{Title.slice(0, 2)}</span>
            <span className="text-secondary">{Title.slice(2)}</span>
          </h1>
        </div>
        <div className="w-1/2">
          <Image
            className="absolute z-10 animate-leftToRight"
            src={whiteCircle}
            alt="white circle"
          />
        </div>
      </div>
    </main>

tailwind.config.js #

theme: {
    extend: {
      colors: {
        primary: "#1c2340",
        secondary: "#f27eb2",
      },
      fontFamily: {
        Josefin: ["Josefin Sans", "sans-serif"],
        Poppins: ["Poppins", "sans-serif"],
      },
      animation: {
        leftToRight: "leftToRight 10s ease-in-out infinite",
      },
      keyframes: {
        leftToRight: {
          "0%, 100%": { left: "40%", top: "-20%", rotate: "0deg" },
          "50%": { left: "93%", top: "50%", rotate: "180deg" },
        },
      },
    },
  },

layout.js #

<html lang="en">
      <body className="font-Poppins overflow-hidden max-w-[100vw] bg-primary text-white">
        <Navbar />
        <div className="mt-[60px]">{children}</div>
        <Footer />
      </body>
    </html>

问题截图说明 #

• 白色圆形在顶部时无垂直滚动条：
  
• 图片移动超出屏幕范围后，滚动条出现：
  

问题原因与修复方案 #

核心原因 #

1. 绝对定位的图片没有绑定到带有relative定位的父容器，导致其定位参考为整个文档（html/body），此时仅给body加overflow-hidden可能因浏览器默认样式、元素层级等问题失效。
2. 动画中top: 50%结合图片自身高度，会让元素底部超出视口触发滚动条；left: 93%同样会让图片右侧超出视口宽度。

具体修复步骤 #

方案1：给图片父容器添加定位与溢出控制

修改page.js中图片的父容器，添加relative、overflow-hidden并设置合适高度：

<div className="w-1/2 relative overflow-hidden h-screen">
  <Image
    className="absolute z-10 animate-leftToRight"
    src={whiteCircle}
    alt="white circle"
  />
</div>

（注：原代码中w-/2是笔误，需修正为w-1/2）

方案2：全局锁定视口溢出

在layout.js中给html和body同时设置溢出隐藏，并清除默认边距：

<html lang="en" className="overflow-hidden h-full">
  <body className="font-Poppins overflow-hidden max-w-[100vw] bg-primary text-white m-0 h-full">
    <Navbar />
    <div className="mt-[60px] h-[calc(100%-60px)] overflow-hidden">{children}</div>
    <Footer />
  </body>
</html>

方案3：改用transform优化动画与溢出

将动画中的left/top替换为transform，既提升动画性能，也能更精准控制元素溢出：
修改tailwind.config.js中的keyframes：

keyframes: {
  leftToRight: {
    "0%, 100%": { 
      left: "40%", 
      transform: "translateY(-20%) rotate(0deg)" 
    },
    "50%": { 
      left: "40%", 
      transform: "translateX(53%) translateY(50%) rotate(180deg)" 
    },
  },
},

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