位置:粘性仅适用于右侧

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>