替代CSS滚动快照? [英] Alternative to CSS scroll-snap?

问题描述

我已经在Chrome版本75.0.3770.100和Firefox版本67.0.3上测试了CSS滚动捕捉.它在Chrome浏览器中可以很好地工作，但是在Firefox中却得到了奇怪的结果.根据 MDN ，仅Firefox从68版开始支持滚动快照的新规范，我可以确认，使用新规范根本不起作用:

I have tested CSS scroll-snap on Chrome version 75.0.3770.100 and Firefox version 67.0.3 It works beautifully in Chrome, but I am getting strange results in Firefox. According to MDN, Firefox only started supporting the new spec for scroll-snap from version 68, and I can confirm that with the new spec, it doesn't work at all:

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

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

但是，使用旧的规范(如建议的那样)，似乎可以使起作用，但是它非常笨拙且不稳定，并且经常向后滚动:

However, using the old spec (as is suggested), it seems to sort of work, but is extremely janky and erratic and seems to scroll backwards a lot of the time:

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

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

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

I have not found any solution (CSS or JS) that replicates this behaviour in my version of Firefox (which isn't old at all!). The best solution I've had so far is my own custom JS alternative, which simply waits for the user to stop scrolling, and then smooth scrolls them to the nearest snap point. This isn't ideal though, as it doesn't feel very natural - it slows down to a natual stop and then auto-scrolls you to the snap point.

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

Here's my Codepen playground: https://codepen.io/mrseanbaines/pen/WqErwZ?editors=0100. If I load this same pen in both browsers, I get the behaviours described above.

有人遇到过这个问题吗?

Has anyone come across any soutions to this?

推荐答案

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

I agree that the Firefox scroll-snap feels much better. An option I had come across that imitates CSS snap-points, if you're willing to use JavaScript, is https://github.com/lucafalasco/scroll-snap

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

By default, it will operate like it does on Chrome, but if you were to set the timeout to 1, it will snap immediately, like in Firefox. I've forked their react example and changed the config to work cross-browser as it would in Firefox: https://codesandbox.io/s/scroll-snap-react-5tssq

注意:它目前没有Firefox所具有的细微缓和，但是很难注意到两者之间的区别.

Note: It currently doesn't have the same subtle easing that Firefox does, but it's pretty difficult to notice a difference.

这篇关于替代CSS滚动快照?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！