如何保持部分透明的.png,可滚动的<div>？

Question

我有一个包含可滚动内容的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/

Answer 1

是的,在滚动条覆盖中使用CSS:

pointer-events: none;

然后,透明PNG区域中的所有点击和其他鼠标事件将落到其下方的元素中.查看小提琴的更新版本.