如何保留部分透明 .png 下方的 <div> 可滚动？答案

【问题标题】：How do I keep a <div> that's underneath a partially transparent .png, scrollable?如何保留部分透明 .png 下方的 <div> 可滚动？
【发布时间】：2014-09-17 19:14:17
【问题描述】：

我有一个包含可滚动内容的 div，我想在该 div 上放置一个叠加层。

但是，叠加层使其下方的所有内容都无法滚动且无法点击（显然）。有办法解决吗？一些 HTML/CSS/JS 组合可能保持可见，但允许其下方的 div 仍然是可滚动/可点击的？

我问的原因是因为我有一个带有背景图像的 div（这是我的叠加层）。但是图像中间有一个洞（它是一个部分透明的 png）。因此，实际上位于此叠加层下方的 div 是可见的。所以我希望能够与那个 div 交互。

我知道我可以编写 Js 来将任何单击/滚动事件从一个元素传输到另一个元素，但是我在单个页面上有很多上述设置的实例，因此为每个单独的情况编写 Js 将是一种矫枉过正。

提前感谢您的帮助。

CSS

#scroller {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100px;
  width: 50px;
}
#scroller>div {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 500px;
  width: 50px;
}
#scroller-overlay {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100px;
  width: 50px;
}

HTML

<div id="scroller">
<div></div>
</div>
<div id="scroller-overlay"></div>

JSFIDDLE：http://jsfiddle.net/7L8cmeuo/3/

【问题讨论】：

标签： javascript html css overlay scrollable

【解决方案1】：

是的，在滚动覆盖层中使用 CSS：

pointer-events: none;

透明 PNG 区域中的所有点击和其他鼠标事件都将传递到其下方的元素。查看您的fiddle 的更新版本。

【讨论】：

哇，这很酷。我今天学到了一些东西。而browser support 相当不错。
太棒了！我从来不知道它的存在！