位置：粘性仅适用于右侧[重复]

Question

我希望我的单元格贴在可滚动容器的左侧或右侧。如您所见，尽管left: 0px，黄色单元格仅粘在右侧。

我怎样才能让它同时坚持，如果你一直滚动到右边，单元格应该卡在左侧？像这样：https://stackblitz.com/edit/react-rgukbo?file=app/main.jsx

编辑：似乎如果我在容器上更改direction: ltr/rtl，它会粘在一个或另一个上，但不是两者都有？？？？

.container {
  width: 300px;
  height: 100px;
  overflow: auto;
}

.grid {
  display: grid;
  grid-template-columns: 200px 200px 80px 200px 200px 200px;
}

.cell {
  padding: 10px;
  border: 1px solid black;
  background: white;
}

.sticky {
  position: sticky;
  left: 0px;
  right: 0px;
  z-index: 1;
  background: yellow;
}

<div class="container">
  <div class="grid">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell sticky">3</div>
    <div class="cell">4</div>
    <div class="cell">5</div>
    <div class="cell">6</div>
  </div>
</div>

Answer 1

我可以通过将grid 更改为inline-grid ?‍♂️ 来让它工作

.container {
  width: 300px;
  height: 100px;
  overflow: auto;
}

.grid {
  display: inline-grid;
  grid-template-columns: 200px 200px 80px 200px 200px 200px;
}

.cell {
  padding: 10px;
  border: 1px solid black;
  background: white;
}

.sticky {
  position: sticky;
  left: 0px;
  right: 0px;
  z-index: 1;
  background: yellow;
}

<div class="container">
  <div class="grid">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell sticky">3</div>
    <div class="cell">4</div>
    <div class="cell">5</div>
    <div class="cell">6</div>
  </div>
</div>