How can I disable clicks but still allow scrolling

问题:

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 the iframe. I know that the general solution to this would be to have an invisible div on top of the iframe to disable all interaction. However, this also disables the ability to scroll. Is it possible to catch and ignore any clicks on the iframe page but still allow the scroll to be propagated?

回答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>