javascript - 如何使部分透明的 .png 下方的 保持可滚动？

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 区域中的所有点击和其他鼠标事件都将传递到其下方的元素。查看您的 fiddle 的更新版本.