有没有可能将位置粘性行为限制在特定的网格行中？

Question

我有一个基本的两列布局:一个用于图像，一个用于文本。因为文本列可能会变得很长，所以我想让图像滚动。我可以用position: sticky;很容易地实现这一点，但是最后有第三个容器跨越了这两列。由于所有这三个元素都在同一网格中，因此包含position: sticky;的图像与第三个容器重叠。

有没有办法将图像限制在第一个网格行，而不使用JS或添加额外的容器？

示例：https://jsfiddle.net/y27unz9L/ .element-1是我想限制在第一个网格行的那个。

<div class="grid-container">
  <div class="element-1"></div>
  <div class="element-2"></div>
  <div class="element-3"></div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 2em;
  align-items: start;
}

.element-1 {
  min-height: 10vh;
  grid-row: 1;
  grid-column: 1 / 2;
  position: sticky;
  top: 1em;
  background: red;
}

.element-2 {
  min-height: 100vh;
  grid-row: 1;
  grid-column: 2 / 3;
  background: blue;
}

.element-3 {
  min-height: 100vh;
  grid-row: 2;
  grid-column: 1 / 3;
  background: yellow;
}

Answer 1

​

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 2em;
  align-items: start;
}

.element-1 {
  min-height: 10vh;
  grid-row: 1;
  grid-column: 1 / 2;
  position: sticky;
  top: 1em;
  background: red;
}

.element-2 {
  min-height: 100vh;
  grid-row: 1;
  grid-column: 2 / 3;
  background: blue;
}

.element-3 {
  min-height: 100vh;
  grid-row: 2;
  grid-column: 1 / 3;
  background: yellow;
  position: sticky;
}

<div class="grid-container">
  <div class="element-1"></div>
  <div class="element-2"></div>
  <div class="element-3"></div>
</div>

​

Answer 2

嗯，我会让element-1作为单元格，并在其中粘贴一些东西。像这样的https://jsfiddle.net/7pcr8fvz/。

<div class="element-1">
  <div class='sticky'>
  </div>
</div>

.element-1 {
  grid-row: 1;
  grid-column: 1 / 2;
  align-self: stretch; //so it's 100% of the available height
}
.element-1 .sticky {
  position: sticky; //make this element sticky
  top: 1em;
  background: red;
  height: 10vh;
}

使.element-1粘滞的问题是它是相对于网格的，如果你使子对象粘滞，那么该子对象相对于.element-1的位置。