如何使滚动捕捉在 FF 中工作，以 body 作为滚动容器

Question

我试图让一个垂直滚动的页面与每个段落（每个照片描述）对齐。我也想body成为我的滚动容器，而不是div里面的一些body。

我有：

body.scroll-snap {
  scroll-snap-type: y proximity;
}

.scroll-snap .episode p {
  scroll-snap-align: start;
  scroll-margin: 8px;
}

这在 Chrome 和 Safari 中完美运行，但在 Firefox 中不起作用。Firefox 检查器显示了应用于标签的这些 CSS 属性，但滚动不对齐。

如何使其在 FF 中工作而不创建额外的滚动容器？

Answer 1

显然，更好的方法是将htmlelement 设置为捕捉容器而不是body. 在这种情况下，FF 和类似 Chrome 的浏览器中的滚动捕捉。但它在当前的 Safari 中停止工作。您可以通过设置scroll-snap-type两者来修复它。

另请注意，当前的 Safari 不支持scroll-margin，而是支持已弃用的scroll-snap-margin（希望这将在未来版本中修复）。

所以我目前的解决方案是：

html.scroll-snap {
  scroll-snap-type: y proximity;
}

html.scroll-snap body {
  scroll-snap-type: y proximity;
}

.scroll-snap .episode p {
  scroll-snap-align: start;
  scroll-margin: 8px;
  scroll-snap-margin: 8px; /* works in Safari */
}