英文:
tailwind css overflow hidden doesn't working in animation
问题
我正在尝试通过移动到不同的位置来实现图像的动画效果，但每当它超出屏幕时，滚动条就会出现。我尝试在父元素中添加overflow: hidden，但没有起作用。以下是所需的代码片段。我正在使用带有Next.js的Tailwind CSS。
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-/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>
正如您在这张图片中所看到的，白色圆圈位于顶部，没有垂直滚动条。
现在，一旦图像超出屏幕，滚动条就会出现。
英文:
I'm trying to animate an image by moving to different positions. but whenever it goes beyond the screen. the scrollbar appears. I tried adding overflow hidden in the parent element but it didn't worked. here is the required code snippet. I'm using tailwind css with nextjs
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-/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>
As you can see in this image that white circle is at top and there isn't vertical scroll
now as soon as the image goes beyond the screen scroll appears
答案1
得分: 0
你需要将 overflow-hidden 添加到堆叠上下文中。目前堆叠上下文是 html 元素，所以你可以在 globals.css 中添加如下代码：
html {
@apply overflow-hidden;
}
或者你可以创建一个新的堆叠上下文，使用 relative 并将溢出隐藏添加到其中。
<main class="flex min-h-screen items-center relative overflow-hidden">
示例：https://play.tailwindcss.com/O8dHHydayG
英文:
You need to add overflow-hidden to the stacking context. At the moment that is the html element so you could add to globals.css:
html {
@apply overflow-hidden;
}
Or you could create a new stacking context with relative and add the overflow hidden to that.
<main class="flex min-h-screen items-center relative overflow-hidden">
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论