Tailwind CSS scroll snap x失效求助：实现卡片横向滚动吸附

问题分析 #

你的代码存在几个核心问题导致横向滚动吸附功能失效：

• 父容器未设置flex属性，子元素默认垂直排列，无法实现横向并排
• 父容器缺少overflow-x-auto，没有启用横向滚动条
• 子元素的mx-auto会干扰横向滚动布局，导致卡片无法正确排列

修正后的代码 #

<div class="snap-mandatory snap-x flex overflow-x-auto gap-4 pb-4">
  <div class="flex-shrink-0 w-full md:w-[calc(100%-2rem)] max-w-2xl bg-[#821c20] rounded-xl shadow-lg overflow-hidden snap-center">
    <div class="md:flex">
      <div class="md:shrink-0">
        <img class="h-48 w-full object-cover md:h-full md:w-48" src="https://files.catbox.moe/whnmix.png" alt="Modern building architecture">
      </div>
      <div class="p-8">
        <div class="uppercase tracking-wide text-sm text-[#166b41] font-semibold">Test</div>
        <p class="mt-2 text-white">Test<a class="underline decoration-pink-500">Test</a>。</p>
      </div>
    </div>
  </div>

  <div class="flex-shrink-0 w-full md:w-[calc(100%-2rem)] max-w-2xl bg-[#821c20] rounded-xl shadow-lg overflow-hidden snap-center">
    <div class="md:flex">
      <div class="md:shrink-0">
        <img class="h-48 w-full object-cover md:h-full md:w-48" src="https://files.catbox.moe/whnmix.png" alt="Modern building architecture">
      </div>
      <div class="p-8">
        <div class="uppercase tracking-wide text-sm text-[#166b41] font-semibold">Test</div>
        <p class="mt-2 text-white">Test<a class="underline decoration-pink-500">Test</a>。</p>
      </div>
    </div>
  </div>
</div>

关键修改说明 #

• 父容器调整：
  • 添加flex实现子元素横向排列
  • 添加overflow-x-auto启用横向滚动条
  • 添加gap-4控制卡片间距，pb-4避免滚动条遮挡卡片底部内容
• 子元素调整：
  • 移除mx-auto，消除对横向滚动布局的干扰
  • 添加flex-shrink-0防止卡片被压缩变形
  • 调整宽度为w-full md:w-[calc(100%-2rem)]，确保移动端占满宽度，桌面端保留侧边间距

修改后卡片会横向并排，滚动时自动吸附到每个卡片的中心位置，满足你的需求。

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