时间戳

首页 > 解决方案 > CSS scroll-snap 的替代品？

css - CSS scroll-snap 的替代品？

问题描述

我在 Chrome 版本 75.0.3770.100 和 Firefox 版本 67.0.3 上测试了 CSS scroll-snap 它在 Chrome 中运行良好，但在 Firefox 中我得到了奇怪的结果。根据MDN，Firefox 仅从版本 68 开始支持滚动快照的新规范，我可以确认使用新规范，它根本不起作用：

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

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

然而，使用旧规范（如建议的那样），它似乎有点工作，但非常不稳定和不稳定，并且似乎很多时候向后滚动：

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

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

我还没有找到任何解决方案（CSS 或 JS）可以在我的 Firefox 版本（一点也不旧！）中复制这种行为。到目前为止，我拥有的最佳解决方案是我自己的自定义 JS 替代方案，它只是等待用户停止滚动，然后将它们平滑滚动到最近的捕捉点。但这并不理想，因为它感觉不是很自然 - 它会减慢到自然停止，然后自动滚动到快照点。

这是我的 Codepen 游乐场：https ://codepen.io/mrseanbaines/pen/WqErwZ?editors=0100 。如果我在两个浏览器中加载同一支笔，我会得到上述行为。

有没有人遇到过任何解决方案？

标签： cssscroll-snap-points

解决方案

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

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

注意：它目前没有 Firefox 那样的微妙缓动，但很难注意到其中的差异。

推荐阅读