Prevent touchmove scrolling over embedded iframe

Question

I have a page with an embedded iframe. I generally want to scroll the page normally on touchmove events. However, I need the user to be able to "draw" something within the iframe via touchmove, so I need to prevent the page to scroll when they touchmove over the iframe.

When I try to attach an touchmove event listener to the iframe, in the console in Chrome I get the following error message (same in Firefox):

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080

This even happens, when I set the event listener to false explicitly.

Is there any way to not have the target "being treated as passive" or alternatively, is there any other way to prevent the touchmove scrolling, when I am over the iframe?

_{^{Edit: Above error message was resolved by removing the preventDefault() on the document event listener within the iframe. However...}}

I have the problem that any event listener that I attach to the iframe does not seem to do anything:

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

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

This logs nothing to the console. I assume that happens, because it uses the iframe document's touch move event listener instead?

However, how could I prevent the touchmove's default scrolling behavior, when I cannot trigger the event listener?

If I attach the event listener to the main page's document instead, it only triggers when I start my touch move somewhere else on the page, it does not trigger, when I start it above the iframe.

Btw., the iframe itself has no overflow, so there is no scrolling within the iframe, in case this is relevant.

Answer 1

I was struggling with the same issue too. What worked for me was changing the dimensions from percent to pixels in the head section.

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

In the body, I used the codes as follow:

    //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});

Here are some additional resources for disabling the scroll:

How to disable scrolling temporarily using JavaScript ?

CodePen Home Disable scroll on Desktop and Mobile (only JS, no CSS)

ChatGPT's explanation of why 100% does not work