Html Question posted in
Some basic documentation can be found here.

Html – How to accept clicks in iframe but ignore scrolling from parent page

I’ve embedded multiple iframes in my webpage. When scrolling on the parent page, the scrolling stops and begins to be forwarded to the iframe once the mouse cursor is over it. I know that I can disable pointer events on the iframe using pointer-events: none, but I need the iframe to allow clicks while ignoring scrolling.

I have control over both the parent page and the iframe content. Is there any solution to this how to address this using HTML attributes on the iframe, CSS, or JavaScript?

Tags:

2

Answers


  1. 0

    You can do somthing like this :

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent Page</title>
<style>

  .iframe-container {
    position: relative;
    width: 100%;
    height: 300px; 
    overflow: hidden;
  }
  .iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
  }
</style>
</head>
<body>

<!-- Parent Page Content -->
<div class="iframe-container">
  <iframe src="iframe.html" id="iframe"></iframe>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  var iframe = document.getElementById('iframe');

  // Event listener for scrolling on the parent page
  window.addEventListener('scroll', function(event) {
    // Check if the mouse is over the iframe
    if (!isMouseOverIframe(event.clientX, event.clientY)) {
      // Allow scrolling on the parent page
      event.stopPropagation();
    }
  });

  // Function to check if the mouse is over the iframe
  function isMouseOverIframe(x, y) {
    var rect = iframe.getBoundingClientRect();
    return (
      x >= rect.left &&
      x <= rect.right &&
      y >= rect.top &&
      y <= rect.bottom
    );
  }
});
</script>

</body>
</html>
    Login or Signup to reply.
  2. 0

    Actually there is no way for this to happen, if your iframe content is not large enough to display the full contents.

    The community is trying to add an in-built feature like that here, but still open since 2018, so I don’t think it will be applied so soon.

    But for some people there were some workarounds, but I don’t recommend it, because it can work only in some browsers or specific people, but here they are:

    1 – Check if there’s a overflow-x: hidden on the iframe or its parents

    For some people the problem is solved when changing the overflow-x: hidden to -webkit-overflow-scrolling: touch

    2 – Add the pointer-events: none on your iframe

    I know it is on the question that you’ve already tried, but for the people who don’t need to have an interactive iframe, this is the solution

    3 – nest the iframe within another iframe

    You can nest the iframe of interest within another iframe. This nested iframe can be given a fixed position so that it entirely overlays its wrapping iframe. By doing this, you can prevent browsers like Chrome from allowing the parent elements of this particular iframe to scroll:

    iframe { position: fixed; top: 0; width: 100vw; height: 100vh; border: none; padding: 0; margin: 0; }
    <iframe srcdoc="
<script>
  onclick = e => setTimeout(() => {
    document.querySelector('h1').scrollIntoView();
  }, 1500);
  onclick();
</script>
<h1 style='margin-top: 100vh' >I still scroll into view, but not the top page.</h1>
"></iframe>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search