我不知道这里发生了什么。
请参阅CodePen:https://codepen.io/ilmiont/pen/jJjgPw?editors=1111
使用触摸屏进行滑动可以使用“平滑”滚动行为平滑地上下移动屏幕。
这与Chrome完全一致。
Firefox ...只是不滚动。然而触摸事件被触发,并且“Next”/“Previous”被记录到控制台。但是当用scrollIntoView(...)
调用时,{behavior: "smooth"}
调用什么都不做。
如果单击该按钮,滚动行为将更改为auto
(无平滑滚动)...这在Firefox中没有任何问题。
我错过了什么?当使用smooth
滚动行为时,为什么Firefox根本不滚动,即使看起来滑动被正确检测到了?
更奇怪的是:该示例在CodePen中的Chrome中也不起作用。将HTML / CSS / JS复制到一个新文档中(右键单击CodePen查看器,“查看框架源”)并直接在浏览器中运行,它可以完全按照预期工作,并在页面内平滑滚动。
我想我一定错过了什么,Chrome中的CodePen问题很有意思,但我现在看不到什么。
Chrome ...只是有效......除了CodePen。
Firefox ......一切看起来都应该有效,但滚动永远不会发生。
这花了我太长时间才弄明白,但这里的解决方案最终有效:
使用被动事件监听器!
在原始笔中,我正在做{passive: false}
,然后在preventDefault(...)
和touchstart
事件上调用touchmove
。
事实证明,这不是实现预期效果所必需的。
使用被动侦听器可以使Firefox中的所有内容都按预期工作。
我仍然认为原来的行为是奇怪的;进一步的调查显示Firefox似乎存在时间问题。在swipe(...)
方法中,向dispatchEvent(...)
调用添加250ms超时会导致一切按预期工作 - 似乎触摸处理程序可以继续阻止/限制滚动事件过去应该被删除。
将继续调查,但我现在有一个解决方案。
(编辑 - 忘了提及,当使用被动侦听器时,还要在目标上设置touch-action: none
。)