css - 如何使用正文作为滚动容器在 FF 中使用 scroll-snap

Question

我试图让一个垂直滚动的页面捕捉到每个段落(每个照片描述)。我还希望 body 成为我的滚动容器，而不是 body 中的一些 div。

我有:

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

显然，更好的方法是将 html 元素设置为捕捉容器而不是 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 */
}