4

我正在尝试将垂直滚动的页面与每个段落（每张照片描述）对齐。我也想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 中工作？

4

2 回答 2

3

显然，更好的方法是将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 */
}
于 2020-02-29T23:23:26.157 回答
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 like 时<body class="scroll-snap">，滚动捕捉将被打开，并且滚动将尝试粘贴在<p>每个具有类名的容器的开头episode。

于 2019-09-30T07:19:27.243 回答