防止 touchmove 在嵌入的 iframe 上滚动

Question

我有一个嵌入 iframe 的页面。我通常希望在 touchmove 事件上正常滚动页面。但是，我需要用户能够通过 touchmove 在 iframe 中“绘制”某些内容，因此我需要防止页面在 iframe 上 touchmove 时滚动。

当我尝试将 touchmove 事件侦听器附加到 iframe 时，在 Chrome 的控制台中收到以下错误消息（在 Firefox 中也是如此）：

[干预] 由于目标被视为被动，因此无法防止被动事件侦听器内的默认行为。请参阅https://www.chromestatus.com/features/5093566007214080

当我明确将事件侦听器设置为 false 时，甚至会发生这种情况。

当我在 iframe 上时，有什么方法可以不让目标“被视为被动”，或者是否有其他方法可以防止 touchmove 滚动？

_{^{编辑：通过删除 iframe 内文档事件侦听器上的}}

preventDefault()

解决了上述错误消息。不过……

我遇到的问题是，我附加到 iframe 的任何事件侦听器似乎都没有执行任何操作：

const iframe = document.querySelector('iframe');

iframe.addEventListener('touchmove', function(e) {
  console.log("touchmoving");
  e.preventDefault();
}, { passive: false });

这不会向控制台记录任何内容。我假设会发生这种情况，因为它使用 iframe 文档的触摸移动事件侦听器？

但是，当我无法触发事件侦听器时，如何阻止 touchmove 的默认滚动行为？

如果我将事件侦听器附加到主页的文档，则仅当我开始触摸移动到页面上的其他位置时才会触发，而当我在 iframe 上方启动它时，它会不触发。

顺便说一句，iframe 本身没有溢出，因此 iframe 内没有滚动，以防相关。

Answer 1

我也遇到了同样的问题。对我有用的是将头部的尺寸从百分比更改为像素。

    /* Use pixel instead of 100% for Scroll Freeze to work  */
    #reportContainer {
        width: 310px;    //Instead of 100%
        height: 555px;   //Instead of 100%
        overflow: hidden;
    }

在正文中，我使用的代码如下：

    //Scroll Freeze for Desktop
    scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop;
    scrollLeft =
        window.pageXOffset ||
        document.documentElement.scrollLeft;

        // if any scroll is attempted,
        // set this to the previous value
        window.onscroll = function () {
            window.scrollTo(scrollLeft, scrollTop);
            console.log('scroll')
        };

    //Scroll Freeze for Mobile
    function preventBehavior(e) {
        e.preventDefault(); 
        console.log('touchmove')
    };

    document.addEventListener("touchmove", preventBehavior, {passive: false});

以下是一些用于禁用滚动的附加资源：

如何使用 JavaScript 暂时禁用滚动？

CodePen Home 禁用桌面和移动设备上的滚动（仅 JS，无 CSS）