Question

我已经在Chrome版本75.0.3770.100和Firefox版本67.0.3上测试了CSS滚动捕捉。它在Chrome浏览器中效果很好，但是在Firefox中却得到了奇怪的结果。根据{{3}}，Firefox仅从版本68开始支持滚动滚动条的新规范，我可以证实，使用新规范根本不起作用：

.parent {
  scroll-snap-type: y mandatory;
}

.child {
  scroll-snap-align: start;
}

但是，按照旧的规范（如建议的那样），它似乎可以正常工作，但是却非常不稳定且不稳定，并且似乎经常向后滚动：

.parent {
  scroll-snap-type: mandatory;
}

.child {
  scroll-snap-coordinate: 0 0;
}

我在我的Firefox版本（根本不老！）中没有找到任何可复制此行为的解决方案（CSS或JS）。到目前为止，我最好的解决方案是我自己的自定义JS替代方案，该替代方案只是等待用户停止滚动，然后将其平滑滚动到最近的捕捉点。不过，这并不是理想的选择，因为它感觉不太自然-它会减速到自然停止，然后 then 自动将您滚动到捕捉点。

这是我的Codepen游乐场：MDN。如果我在两个浏览器中都装入了同一支笔，则会得到上述行为。

有人遇到过这个问题吗？

Answer 1

我同意Firefox的滚动快照感觉要好得多。如果您愿意使用JavaScript，我遇到的一个模仿CSS捕捉点的选项是https://github.com/lucafalasco/scroll-snap

默认情况下，它将像在Chrome上一样运行，但是如果您将超时设置为1，它将立即捕捉，就像在Firefox中一样。我分叉了他们的react示例，并更改了配置使其可以像Firefox中那样跨浏览器工作： https://codesandbox.io/s/scroll-snap-react-5tssq

注意：它目前没有Firefox所具有的细微差别，但是很难注意到其中的区别。

替代CSS滚动快照？

1 个答案: