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

问题描述 投票:0回答:1

我不知道这里发生了什么。

请参阅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 ......一切看起来都应该有效,但滚动永远不会发生。

javascript css firefox scroll touch-event
1个回答
0
投票

这花了我太长时间才弄明白,但这里的解决方案最终有效:

使用被动事件监听器!

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

事实证明,这不是实现预期效果所必需的。

使用被动侦听器可以使Firefox中的所有内容都按预期工作。

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

将继续调查,但我现在有一个解决方案。

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

© www.soinside.com 2019 - 2024. All rights reserved.