Skrollr 手机坏了。无法在被动事件侦听器中阻止默认值

Posted 2023-05-08

【中文标题】Skrollr 手机坏了。无法在被动事件侦听器中阻止默认值

【英文标题】：Skrollr mobile broken. Unable to preventDefault inside passive event listener

【发布时间】：2021-09-21 11:02:39

【问题描述】：

在使用 Skrollr 库并将网站加载为移动设备时，我在所有 chromium 浏览器上都收到以下错误：

"[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See <URL>"

该库上周运行良好，现在我在将页面加载为移动设备时尝试的每个浏览器都出现此错误。

即使是官方 github 中的示例，在移动设备上加载时也会损坏并显示相同的错误。

有谁知道如何解决这个问题？

skrollr.js:730--

https://raw.githubusercontent.com/Prinzhorn/skrollr/master/src/skrollr.js

来自 git 链接的错误示例：

http://prinzhorn.github.io/skrollr/examples/docu/1.html
http://prinzhorn.github.io/skrollr/examples/docu/2.html
http://prinzhorn.github.io/skrollr/examples/docu/3.html
http://prinzhorn.github.io/skrollr/examples/docu/4.html

要复制，- 加载页面、检查、选择移动设备并刷新。突然间，一切都中断并报告错误。 HTML标签应该有

class="skrollr skrollr-mobile" 

如果检测到移动设备负载。

我正在使用它开发一个网站，在 7 月 21 日下午，我注意到行为发生了变化，那时我注意到了错误。

我使用它重新创建了一个简单的网站，并看到了完全相同的问题。后来我决定检查 git hub 链接示例并看到同样的问题。

会不会是浏览器内核的某种更新？非常感谢修复或绕过。

更新：

我发现在 CSS 中添加以下行可以消除错误。

* 
  touch-action: manipulation; 

不幸的是，图书馆的功能仍然不能 100% 在移动设备上运行。计算移动设备上可滚动区域量的脚本已关闭，并在文档末尾添加空格。所有滚动事件都会受到这种错误计算的影响。

【参考方案1】：

所以在对这个问题进行了更多研究之后，我找到了一个解决方案，希望能帮助所有在 2021 年以后使用这个库的人。

要禁用错误，请添加以下 CSS：

* 
  touch-action: manipulation; 

最后要有适当的动画大小并且没有空格，特别是如果您：

transform: translateX();

当您在移动设备上时，在主滚动体上被禁用，请在结束标记之前使用以下代码。

<script type="text/javascript">
        if((/android|iPhone|iPad|iPod|BlackBerry|Windows Phone/i).test(navigator.userAgent || navigator.vendor || window.opera))
                skrollr.init(
                forceHeight: false
                );
         else 
                skrollr.init();
        
</script>

这将帮助所有想要在使用垂直滚动条时模仿水平滚动的人。