如何禁用点击但仍然允许在iframe中滚动？

Question

我在固定高度的面板上的页面上显示了一个iframe，但是在iframe中呈现的页面要大得多。我不希望用户能够在iframe中单击任何内容。我知道一般的解决方案是在iframe顶部设置一个不可见的div来禁用所有交互。但是，这也会禁用滚动功能。是否可以捕获和忽略iframe页面上的任何点击，但仍然允许滚动传播？

Answer 1

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

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

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

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