时间戳

首页 > 解决方案 > Firefox、触摸事件和“平滑”滚动行为——导致不滚动

javascript - Firefox、触摸事件和“平滑”滚动行为——导致不滚动

问题描述

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

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

使用“平滑”滚动行为，使用触摸屏滑动应该平滑地上下切换屏幕。

这确实与 Chrome 的预期完全一样。

Firefox ...只是不滚动。然而，触摸事件被触发，并且“下一个”/“上一个”被记录到控制台。但是scrollIntoView(...)当使用 调用时，调用什么也不做{behavior: "smooth"}。

如果您单击该按钮，滚动行为将更改为auto（无平滑滚动）......这在 Firefox 中没有任何问题。

我错过了什么？为什么在使用滚动行为时 Firefox 根本不滚动smooth，即使似乎正确检测到滑动？

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

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

Chrome ......正常工作......除了在 CodePen 中。

Firefox ......一切看起来应该可以工作，但滚动永远不会发生。

标签： javascriptcssfirefoxscrolltouch-event

解决方案

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

使用被动事件监听器！

在原来的笔中，我正在做然后{passive: false}调用preventDefault(...)和事件。touchstarttouchmove

事实证明，这不是达到预期效果所必需的。

使用被动侦听器会导致一切在 Firefox 中按预期工作。

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

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

（编辑——忘了提，当使用被动监听器时，也设置touch-action: none在目标上。）

推荐阅读