溢出大于 100vh 的 CSS 滚动捕捉点?

Question

当容器高于 100vh 时，我在实现滚动捕捉点时遇到问题。我想使用强制对齐点，但也允许用户在高度大于 100vh 时滚动。

我通过添加额外的对齐点来完成这项工作，我希望用户能够滚动浏览而无需捕捉到高于 100vh 的div 的顶部。

.parent {
min-height: 100vh; //actual is taller than 100vh
scroll-snap-align: start;
}
.child {
scroll-snap-align: center;
}

我希望能够自然地滚动穿过一个高大的容器，而不必总是在滚动时捕捉到顶部。这种方式在Chrome中有效，但在Safari中，任何溢出都会将用户捕捉回父级的顶部。有没有办法在高于窗口高度的容器上使用对齐点，同时能够滚动溢出？

Answer 1

将overflow-y: scroll添加到父级。

.parent{
max-height:100vh;
overflow-y:scroll;
}

并且scroll-snap-align进入子元素