Firefox,触摸事件和“平滑”滚动行为–导致无滚动

时间:2019-03-28 16:53:23

标签: javascript css firefox scroll touch-event

我不知所措。

请参阅CodePen:https://codepen.io/ilmiont/pen/jJjgPw?editors=1111

使用“平滑”滚动行为,使用触摸屏轻扫即可平滑地上下切换屏幕。

这与Chrome完全一样。

Firefox ...只是不滚动。然而,触摸事件正在被触发,并且“下一个” /“上一个”被记录到控制台。但是scrollIntoView(...)调用在与{behavior: "smooth"}一起调用时不起作用。

如果单击该按钮,则滚动行为将更改为auto(无法平滑滚动)...,并且在Firefox中不会出现任何问题。

我错过了什么?为什么使用smooth滚动行为时Firefox根本无法滚动,即使看上去可以正确检测到滑动也是如此?

更奇怪的是:该演示在CodePen的Chrome中也不起作用。将HTML / CSS / JS复制到一个新文档中(右键单击CodePen查看器,“查看框架源”)并直接在浏览器中运行,它完全可以按预期运行,并且可以在页面中平滑滚动。

我想我一定错过了一些东西,Chrome中的CodePen问题很有趣,但是我现在看不到什么。

Chrome ...可以使用...除了CodePen。

Firefox ...一切看起来应该正常工作,但滚动从未发生。

1 个答案:

答案 0 :(得分:0)

这花了我很长时间才弄清楚,但这是最终可行的解决方案:

使用被动事件监听器!

在原来的笔中,我正在做{passive: false},然后在preventDefault(...)touchstart事件上调用touchmove

事实证明,达到所需的效果不是必需的。

使用被动侦听器可使一切按预期在Firefox中正常工作。

我仍然认为原始行为很奇怪;进一步的调查显示,Firefox中似乎存在计时问题。在swipe(...)方法中,向dispatchEvent(...)调用添加250ms超时将导致所有事情也按预期方式工作–似乎触摸处理程序可以继续阻止/限制滚动事件,而应在应有的时间过去删除。

会继续调查,但我现在有解决方案。

编辑 –忘记了,使用被动侦听器时,还要在目标上设置touch-action: none。)