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

2023年8月16日 775次阅读

我在我的页面上有一个iframe显示在一个固定高度的面板中,但在iframe中呈现的页面要大得多.

我不希望用户能够点击iframe中的任何内容.我知道对此的一般解决方案是在iframe上面有一个不可见的div来禁用所有交互.但是,这也会禁用滚动功能.

是否可以捕获并忽略iframe页面上的任何点击,但仍允许传播滚动？ 最佳答案 如果您不希望用户难以处理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>
点赞