Tailwind CSS横向滚动吸附（scroll snap x）失效问题求助

以下是修改后的完整代码，可直接实现横向滚动吸附效果：

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600&display=swap');
* {
    font-family: 'Barlow Condensed', sans-serif;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>

    <title>Project Impossible</title>
</head>
<body>
    <!-- 横向滚动吸附容器 -->
    <div class="snap-x snap-mandatory h-screen w-screen overflow-x-scroll flex">
        <div class="snap-start bg-amber-200 flex-shrink-0 w-screen h-screen flex items-center justify-center text-8xl">1</div>
        <div class="snap-start bg-blue-200 flex-shrink-0 w-screen h-screen flex items-center justify-center text-8xl">2</div>
        <div class="snap-start bg-orange-200 flex-shrink-0 w-screen h-screen flex items-center justify-center text-8xl">3</div>
        <div class="snap-start bg-green-200 flex-shrink-0 w-screen h-screen flex items-center justify-center text-8xl">4</div>
    </div>
</body>
</html>

关键修改说明： #

• 容器属性调整：

  • 将原有的snap-y改为snap-x，指定横向滚动吸附方向
  • 替换overflow-scroll为overflow-x-scroll，仅开启横向滚动
  • 添加flex类，让子元素横向排列（纵向滚动依赖块级元素自动换行，横向需要强制同行布局）
  • 移除mx:auto，横向滚动容器无需水平居中

• 子元素属性调整：

  • 添加flex-shrink-0，防止子元素在flex布局中被挤压变形，确保每个元素宽度保持为w-screen
  • 将原grid布局替换为flex items-center justify-center（也可保留grid，居中效果一致），简化内容居中实现
  • 保留snap-start，指定滚动吸附的锚点为元素起始位置

内容的提问来源于stack exchange，提问作者The Silent Coder