如何禁用点击但仍允许在iframe中滚动? [英] How can I disable clicks but still allow scrolling in an iframe?

问题描述

我在固定高度的面板上的页面上显示了一个iframe，但是在iframe中呈现的页面要大得多. 我不希望用户能够单击iframe中的任何内容.我知道一般的解决方案是在iframe顶部设置一个不可见的div来禁用所有交互.但是，这也会禁用滚动功能.

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?

推荐答案

如果您不希望iframe的内容与用户进行交互，则可以禁用其上的指针事件.但是，如果您希望它可滚动，只需将一个完整尺寸的iframe放在一个较小的div中即可，并带有溢出功能:滚动.

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>

这篇关于如何禁用点击但仍允许在iframe中滚动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！