Search code examples
javascripthtmlcssoverlayscrollable

How do I keep a <div> that's underneath a partially transparent .png, scrollable?

I have a div that contains scrollable content and I want to place an overlay on top of that div.

However, the overlay makes everything underneath it unscrollable and unclickable (obviously). Is there a way around that? Some HTML/CSS/JS combination maybe that keeps visible and yet allows the div that is right underneath it to still be scrollable/clickable ?

The reason I'm asking is because I have a div with a background-image (that's my overlay). But the image has a hole in the middle (it's a partially transparent png). So the div that is actually underneath this overlay is visible. So I want to be able to interact with that div.

I know I can write Js to transfer any click/scroll events from one element to another but I have lots of instances of the above setup on a single page, so writing that Js for every single case would be an overkill.

Thank you in advance for your help.

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/

Solution

  • Yes, with CSS in the scroller overlay:

    pointer-events: none;

    All clicks and other mouse events in the area of the transparent PNG will then fall through to the elements below it. See updated version of your fiddle.