替代 CSS 滚动捕捉?

Posted

技术标签:

【中文标题】替代 CSS 滚动捕捉?【英文标题】:Alternative to CSS scroll-snap? 【发布时间】:2019-11-08 05:19:02 【问题描述】:

我已经在 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。如果我在两个浏览器中加载同一支笔,我会得到上述行为。

有人遇到过这个问题吗?

【问题讨论】:

【参考方案1】:

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

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

注意:它目前没有 Firefox 那样的微妙缓动,但很难注意到差异。

【讨论】:

以上是关于替代 CSS 滚动捕捉?的主要内容,如果未能解决你的问题,请参考以下文章

有啥方法可以禁用 CSS 滚动捕捉点?

CSS 滚动捕捉 API?

当您尝试放大时,CSS 滚动捕捉卡住

CSS 仅在 iOS 中滚动捕捉

如何在 iOS Chrome 中使用 CSS 滚动捕捉 + 图片错误隐藏滚动条

如何在 Chrome 中模拟 CSS 滚动捕捉点?