我不知所措。
请参阅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 ...一切看起来应该正常工作,但滚动从未发生。
答案 0 :(得分:0)
这花了我很长时间才弄清楚,但这是最终可行的解决方案:
使用被动事件监听器!
在原来的笔中,我正在做{passive: false}
,然后在preventDefault(...)
和touchstart
事件上调用touchmove
。
事实证明,达到所需的效果不是必需的。
使用被动侦听器可使一切按预期在Firefox中正常工作。
我仍然认为原始行为很奇怪;进一步的调查显示,Firefox中似乎存在计时问题。在swipe(...)
方法中,向dispatchEvent(...)
调用添加250ms超时将导致所有事情也按预期方式工作–似乎触摸处理程序可以继续阻止/限制滚动事件,而应在应有的时间过去删除。
会继续调查,但我现在有解决方案。
(编辑 –忘记了,使用被动侦听器时,还要在目标上设置touch-action: none
。)