滚动两个高度不同的DIV；一个等待另一个

Question

因此，在 HTML 文档中，我有两个并排的 DIV，每个 DIV 的高度不同。当用户开始向下滚动时，两个 DIV 应该同时开始滚动，正如您所期望的那样。当到达较短 DIV 的末尾时，它应该粘在视口的底部，直到到达较高 DIV 的末尾。然后页面应该继续“正常”滚动。这是起点：

.parent {
  display: flex
}

.child {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.left {
  background: lightblue;
  height: 200vh;
}

.right {
  background: lightcoral;
  height: 120vh;
}


<div class="parent">
  <div class="child left">
    <div>Top</div>
    <div>Bottom</div>
  </div>
  <div class="child right">
    <div>Top</div>
    <div>Bottom</div>
  </div>
</div>

https://jsfiddle.net/scx8h7ud/

摆弄了一段时间后，我只能实现与我试图实现的完全相反的目标：

.parent {
  display: flex
}

.child {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.left {
  background: lightblue;
  height: 200vh;
}

.right {
  background: lightcoral;
  height: 120vh;
  position: sticky;
  top: 0;
}

https://jsfiddle.net/voqhemdx/

如有任何帮助，我们将不胜感激。

Answer 1

您确实可以考虑使用

position: sticky

，但将

top

偏移量设置为

20vh

，这将是元素高度和视口高度的差异：

.parent {
  display: flex
}

.child {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: sticky;
}

.left {
  background: lightblue;
  height: 200vh;
}

.right {
  background: lightcoral;
  height: 120vh;
  top: -20vh;
}

<div class="parent">
  <div class="child left">
    <div>Top</div>
    <div>Bottom</div>
  </div>
  <div class="child right">
    <div>Top</div>
    <div>Bottom</div>
  </div>
</div>