Question

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

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

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

我知道我可以编写Js来将任何点击/滚动事件从一个元素转移到另一个元素但是我在一个页面上有很多上述设置的实例，所以为每个案例编写Js都是一种过度杀伤。< / p>

提前感谢您的帮助。

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的更新版本。

如何在部分透明的.png，可滚动的<？div>下面保留一个<div>？

1 个答案: