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

Question

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

Answer 1

如果您不希望用户可以交互iframe的内容，则可以在其上禁用指针事件。但是你想让它可以滚动，只需将一个完整大小的iframe放在一个较小的div中，并使用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>