html - 溢出大于 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 中，任何溢出都会将用户捕捉回父级的顶部。有没有办法在高于窗口高度的容器上使用捕捉点，同时能够滚动溢出？

score 0 · Accepted Answer

添加overflow-y: scroll到父级。

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

也scroll-snap-align进入子元素

1 回答 1