How can I disable clicks but still allow scrolling in an iframe?

Question

I have an iframe showing on my page in a panel of a fixed height but the page rendered in the iframe is much larger. I don\'t want the user to be able to click on anything in th

Answer 1

If you don't want the contents of the iframe to be interactable by the user, you can disable pointer-events on it. But as you want it to be scrollable, just put a full sized iframe in a smaller div with overflow: scroll.

div {
  width: 50vw;
  height: 50vh;
  overflow: scroll;
}

iframe {
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}

<div>
  <iframe src="http://example.com"></iframe>
</div>