如何使用正文作为滚动容器在 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

好的，我找到了解决方案。以下代码使滚动捕捉在 Firefox 中以 body 作为容器工作。

html {
  height: 100%;
  overflow: hidden;
}

body {
  height: 100%;
  overflow: auto;
}

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

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

然后当你有像 <body class="scroll-snap"> 这样的主体时，滚动捕捉将被打开，并且滚动将尝试停留在每个 <p> 名称为 class 的容器的开始处 episode.

Answer 2

显然更好的方法是将 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 */
}

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

How to make scroll-snap working in FF with body as scrolling container

css

firefox

scroll-snap