溢出大于 100vh 的 CSS 滚动捕捉点？答案

【问题标题】：CSS scroll snap points with overflow greater than 100vh?溢出大于 100vh 的 CSS 滚动捕捉点？
【发布时间】：2020-01-11 10:24:40
【问题描述】：

当容器高于 100vh 时，我无法实现滚动捕捉点。我想使用强制捕捉点，但也允许用户在高度大于 100vh 时滚动。

我通过在我希望用户能够滚动而不捕捉到高于 100vh 的 div 顶部的情况下添加额外的捕捉点来完成这项工作。

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

.child {
    scroll-snap-align: center;
}

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

【问题讨论】：

【解决方案1】：

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

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

还有scroll-snap-align 进入子元素

【讨论】：