如何实现不同高度DIV滚动：短DIV触底后粘滞至长DIV滚动完毕

你只需要修改较短DIV的CSS属性，将top: 0替换为bottom: 0即可实现需求：

.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;
  bottom: 0; /* 关键修改：从top:0改为bottom:0 */
}

<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>

原理说明 #

• position: sticky 结合 bottom: 0 会让元素在自身底部触及视口底部时，粘滞在视口底部。
• 父容器的高度由较长的DIV决定（200vh），因此较短的DIV会一直粘滞到较长DIV的底部也到达视口底部为止。
• 当较长DIV滚动到底部后，整个父容器的底部与视口底部对齐，粘滞行为自动结束，页面恢复正常滚动。

内容的提问来源于stack exchange，提问作者marc-cs50