1

Is there a way to make the body of the frame to be unresponsive on mobile (meaning not responsive to any touch)?

I am loading a fullscreen iframe and everytime I touch something in the iframe, the body behind the iframe seems to be affected. For example, the body starts to scroll or gets clicked on.

This only happens though when I use a javascript function inside my iframe, as if my function inside the iframe is affecting the body outside.

I'd like to prevent the body from being affected at all while my iframe is in view. What could I do?

kevinkt
  • 735
  • 12
  • 24

1 Answers1

0

This happens because your iframe it's inside the body of your site. It's actually expected and correct behaviour.

Imagine this over-simplificaiton of HTML:

<body>
 <iframe />
</body>

As you can see, iframe will be inside of Body, so by clicking anything in the iframe, you're going through the body.

If you want to avoid unexpected behaviour, try adding event listeners to your body and using event.preventDefault(). You can do that with the scroll event, etc. You can read more about preventDefault and scroll. Same will apply to other events you want to mitigate.

You can also disable scrolling using CSS:

using Jquery (source): This will completely disable scrolling:

$('html, body').css({
    overflow: 'hidden',
    height: '100%'
});

To restore:

$('html, body').css({
    overflow: 'auto',
    height: 'auto'
});

But since it's CSS, you can simply add overflow: 'hidden', height: '100%' to your styles and that'd do it.

Obed Parlapiano
  • 3,226
  • 3
  • 21
  • 39