“scroll-snap-type：y强制”在 Safari 中具有不可见的边距

Question

所以我一直在尝试让部分在滚动时粘在屏幕顶部。

我使用

scroll-snap-type: y mandatory;

表示

html

和

body

元素，使用

scroll-snap-align: start;

表示子（部分）元素。

这在 Chrome（Windows 10 和 MacOS Big Sur）和 Edge 上按预期工作，但在 Safari 上无法正常工作。在 Safari 上，滚动会超出几百个像素，裁剪掉所需部分的顶部，并使下一部分的开头可见。每个部分的差距似乎都变得更大。 我已经尝试过：

scroll-padding-top: 0;
scroll-padding-bottom: 0;

父母，以及

scroll-snap-margin-top: 0;
scroll-snap-margin-bottom: 0;

对于儿童。

所有边距/填充值似乎都没有改善结果（其中一些甚至使间隙更大或完全破坏滚动）。

scroll-snap-type: y proximity;

效果符合预期，但不是我想要的效果。

Answer 1

问题已在最新的 Safari 技术预览版中得到修复，iOS 也能正常工作。

页面测试：https://fahrschule-bernhard.webflow.io/?

Answer 2

我也遇到了同样的问题。

使用 -webkit 前缀解决了我向下滚动时的问题。

在父级（body 和 html）上

-webkit-scroll-snap-type: y mandatory;
scroll-snap-type: y mandatory;

关于儿童

-webkit-scroll-snap-align: start;
scroll-snap-align: start;

但是，无论您向下滚动多远，每次触发向上滚动时，它都会向上滚动到正文的顶部，而不是像预期的那样滚动到前一个邻居。