顺风在网格中水平粘性

Question

我真的很努力研究如何使网格的每个元素在水平滚动上粘住。我尝试了很多组合，但 {date} 从来没有粘性。我尝试将

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>

Answer 1

将

top-0

更改为

left-0

。

粘性元素“根据文档的正常流程进行定位，然后根据上、右、下、左的值相对于其最近的滚动祖先进行偏移” - MDN Docs。因为滚动是水平发生的，所以我们需要告诉每个子元素在距左（或右）边 0（或任意多个）像素时坚持。如果有一些垂直滚动，您只会看到

top-0

的效果。

这是 Tailwind Playground 中的一个工作示例。