我使用scroll-snap-type: y在容器中实现垂直滚动，目标是让每个子元素的顶部与父容器的顶部对齐。
但是，我面临一个问题，子元素也会捕捉到父元素容器的底部。我想确保只有每个子元素的顶部捕捉到父元素的顶部，即使子元素比父元素大。
在我的具体例子中，我有一个高度为100vh的父容器。在这个容器中，有两个子元素。第一个子元素的高度为120vh，第二个子元素的高度为100vh。滚动时，我希望避免第二个子元素的顶部与父元素的底部对齐的任何捕捉点。
有没有一种方法可以配置CSS滚动捕捉，只将这些较大的子元素的顶部捕捉到父容器的顶部？

.wrapper {
  height: 100vh;
  overflow: auto;
  scroll-snap-type: y mandatory;
}

.panel {
  width: 100vw;
  scroll-snap-align: start;
  height: 120vh;
  background: red;
  display: flex;
  justify-content: center;
  color: white;
  align-items: center;
}

.panel2 {
  width: 100vw;
  height: 100vh;
  scroll-snap-align: end;
  background: pink;
  display: flex;
  justify-content: center;
  color: black;
  align-items: center;
}

个字符

已编辑

我想澄清一下向下滚动和向上滚动所需的滚动行为：

向下滚动：

当用户向下滚动时，每个子元素的顶部都应该与父容器的顶部对齐。例如，当用户从Panel One向下滚动到Panel Two时，我希望Panel Two的顶部与 Package 器的顶部对齐，其间没有任何额外的对齐点。

向上滚动：

当用户从面板二向上滚动到面板一时，面板一的顶部应该与 Package 的顶部对齐。
关键是避免子元素的底部（如Panel One的底部）与 Package 器底部对齐的任何捕捉点。
捕捉应该只发生在与父容器顶部对齐的子元素顶部，而不是子元素的任何其他点。