HTML SCSS - 启用一个滚动条根据需要滚动每个 div

Question

我有 2 个 div 的情况，彼此高度相同，都需要垂直滚动，因为它们高于屏幕 100% 高度。

我的 ui-person 希望它们一起滚动，然后我将滚动条放在父 div 上。 但他希望每个 div 只滚动直到完成自己的内容。 例如，在以下情况下 - “胖”板是我的屏幕：

滚动完成后，他不希望结果是这样的：

但是像这样：

有什么选择可以做到这一点吗？我没找到。

Answer 1

position: sticky

听起来像是完美的解决方案。

.container {
  display: flex;
  gap: 1rem;
}

.a {
  height: 110vh;
  flex-grow: 1;
  background-color: red;
  
  position: sticky;
  top: 0;
}

.b {
  height: 200vh;
  flex-grow: 1;
  background-color: yellow;
}

<div class="container">
  <div class="a">A</div>
  <div class="b">B</div>
</div>