所以我在反应中使用顺风。我正在尝试滚动捕捉 x 和 y。当我尝试滚动对齐 x 时，它会在 x 轴上滑动但不会对齐。当我尝试滚动 snap y 时，它会缩小容器组件中的所有 div。所以我的问题是滚动捕捉 x 和 y 不起作用。您能修复它们吗？有任何关于我的问题的问题都可以问我，我会回答。这是我的代码（代码设置为滚动捕捉 y，但我需要滚动捕捉 x 和滚动捕捉 y 的帮助）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="description" content="Get Information Before Comps Start" />
<meta name="keywords" content="Education, Study" />
<meta name="author" content="Srimaan, Nahom" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script
src="https://unpkg.com/react@18/umd/react.development.js"
crossorigin
></script>
<script
src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
crossorigin
></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="style.css">
</head>
<body id="bodyWithId">
<script type="text/babel">
function ItemOne() {
return (
<div className="snap-start bg-blue-200 grid w-screen h-screen place-items-center text-8xl">
1
</div>
);
}
function ItemTwo() {
return (
<div className="snap-start bg-orange-200 grid w-screen h-screen place-items-center text-8xl">
2
</div>
);
}
function ItemThree() {
return (
<div className="snap-start bg-green-200 grid w-screen h-screen place-items-center text-8xl">
3
</div>
);
}
function Container() {
return <div className="flex snap-y h-screen w-full mx:auto overflow-scroll">
<ItemOne />
<ItemTwo />
<ItemThree />
</div>;
}
ReactDOM.render(<Container />, document.getElementById("bodyWithId"));
</script>
</body>
</html>要向下/向上滚动，您的代码应该可以工作，但是要向左/向右滚动，您需要将
w-screenmin-w-full<script src="https://cdn.tailwindcss.com"></script>
<div class="snap-y snap-mandatory h-screen w-screen mx:auto overflow-x-hidden">
<div class="snap-start bg-blue-200 grid w-screen h-screen place-items-center text-8xl">1</div>
<div class="snap-start bg-orange-200 grid w-screen h-screen place-items-center text-8xl">
2
</div>
<div class="snap-start bg-green-200 grid w-screen h-screen place-items-center text-8xl">
3
</div>
<!-- scroll to right -->
<div class="snap-start snap-x flex snap-mandatory h-screen w-screen mx:auto overflow-y-hidden">
<div class="snap-start bg-blue-200 grid min-w-full h-screen place-items-center text-8xl">
1
</div>
<div class="snap-start bg-orange-200 grid min-w-full h-screen place-items-center text-8xl">
2
</div>
<div class="snap-start bg-green-200 grid min-w-full h-screen place-items-center text-8xl">
3
</div>
</div>
</div>添加以下类
<div className="flex flex-row gap-6 mb-8 snap-x overflow-x-scroll snap-mandatory touch-pan-x w-full h-full">
...
</div>