How can I disable clicks but allow scrolling in an iframe?
I have an iframe displayed in my page in a fixed height panel, but the page displayed in the iframe is much larger. I don't want the user to be able to click on anything in the iframe. I know a common solution for this would be to have an invisible div on top of the iframe to disable all interactions. However, this also disables the ability to scroll. Is it possible to catch and ignore any clicks on the iframe page, but still allow scroll propagation?
+4
source to share
1 answer
If you don't want the content of the iframe to be interactive to the user, you can disable pointer events on it. But if you want it to be scrollable, just put the full sized iframe in a smaller div with an overflow: scroll.
div {
width: 50vw;
height: 50vh;
overflow: scroll;
}
iframe {
width: 100vw;
height: 100vh;
pointer-events: none;
}
<div>
<iframe src="https://www.w3.org"></iframe>
</div>
+3
source to share