如何实现Tailwind网格元素水平滚动时的粘性定位？

问题描述 #

尝试实现网格元素在水平滚动时的粘性定位，但日期元素始终无法生效。已尝试为父元素添加overflow-x-scroll，在父、子组件上将items-baseline改为items-stretch等多种组合，均未解决问题。

代码片段：

<div
  className="items-baseline grid h-5 grid-cols-[repeat(240,32px)] text-neutral-600 overflow-x-auto"
>
  {[...Array(24)].map((_, i) => (
    <div
      key=key
      className="sticky top-0 whitespace-nowrap text-xs pt-2 dark:text-neutral-30"
      style={{
        gridColumn: i === 0 ? 1 : (24 * i * 2) + 1,
      }}
    >
      {date}
    </div>
  ))}
</div>

核心问题与修复方案 #

• 定位方向错误：水平滚动时的粘性需要用left-0（或right-0），而非垂直方向的top-0，这是粘性不生效的关键原因。
• 容器高度不足：父容器h-5高度过小，可能导致粘性元素被裁切，建议调整为h-8或更高，保证元素完整显示。
• 列位置计算不合理：当前(24 * i * 2) + 1会让元素间隔过大，超出可视范围，可改为i * 10 + 1这类合理间隔，确保元素出现在滚动区域内。
• 无效key值：key=key不符合React列表项的key要求，需改为key={i}保证唯一标识。
• 背景色缺失：粘性元素如果没有背景色，滚动时会被后面的内容覆盖，建议添加bg-white dark:bg-gray-800确保可见性。

修改后的示例代码 #

<div
  className="items-stretch grid h-8 grid-cols-[repeat(240,32px)] text-neutral-600 overflow-x-auto"
>
  {[...Array(24)].map((_, i) => (
    <div
      key={i}
      className="sticky left-0 whitespace-nowrap text-xs pt-2 dark:text-neutral-30 bg-white dark:bg-gray-800"
      style={{
        gridColumn: i * 10 + 1,
      }}
    >
      {date}
    </div>
  ))}
</div>

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