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

Question

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

我已经使用scroll-snap-type: y mandatory;了htmlandbody元素和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;按预期工作，但这不是我想要的效果。

score 1 · Accepted Answer

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

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

score 0 · Accepted Answer

我有同样的问题。

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

在父级（body 和 html）上

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

关于儿童

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

但是无论你向下滚动多远，每次向上滚动触发它都会向上滚动到身体的顶部，而不是像前一个邻居那样。

2 回答 2