我已经在Chrome版本75.0.3770.100和Firefox版本67.0.3上测试了CSS滚动捕捉。它在Chrome浏览器中效果很好,但在Firefox中却得到了奇怪的结果。根据MDN,Firefox仅从版本68开始支持滚动滚动条的新规范,我可以确认,使用新规范根本不起作用:
.parent {
scroll-snap-type: y mandatory;
}
.child {
scroll-snap-align: start;
}
但是,使用旧的规范(如建议的那样),似乎[[sort of可行,但是非常不稳定且不稳定,并且似乎在很多时候向后滚动:
.parent {
scroll-snap-type: mandatory;
}
.child {
scroll-snap-coordinate: 0 0;
}
我还没有找到可以在我的Firefox版本中复制此行为的解决方案(CSS或JS)(一点也不旧!)。到目前为止,最好的解决方案是我自己的自定义JS替代方案,该替代方案只是等待用户停止滚动,然后将其平滑滚动到最近的捕捉点。不过,这并不理想,因为它感觉不太自然-它会减速到自然停止,然后自动将您滚动到捕捉点。这是我的Codepen游乐场:https://codepen.io/mrseanbaines/pen/WqErwZ?editors=0100。如果我在两个浏览器中都装入了同一支笔,则会得到上述行为。then
有人遇到过这个问题吗?
默认情况下,它的运行方式与在Chrome上相同,但是如果您将超时设置为1,则它将像在Firefox中一样立即捕捉。我分叉了他们的react示例,并更改了配置使其可以像Firefox中那样跨浏览器工作:https://codesandbox.io/s/scroll-snap-react-5tssq
注意:它目前没有Firefox所具有的细微差别,但是很难注意到其中的区别。