html - 透明屏幕不允许在 Firefox 中滚动，但可以在 Chrome 中使用

Question

我有一个 iframe，我想阻止点击事件，但允许滚动。

透明屏幕看起来像:

<div class="iframe-container">
  <div class="screen"></div>
  <iframe></iframe>
</div>

.screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}

在 Chrome 中，我仍然可以在屏幕上滚动 iframe 但不能单击，但我在 firefox 中无法滚动。有什么想法吗？

Answer 1

使用下面的代码，它将在所有浏览器中工作

<div class="iframe-container">
  <div class="screen"></div>
  <iframe></iframe>
</div>

.screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: scroll;
  background: transparent;
}