Mousewheel over element with higher z-index

Question

Is there any way to enable mousewheel on container, when cursor is over the another element with higher z-index? Here is example: https://jsfiddle.net/dkdghj7r/.

$('div').on('mousewheel', function(event) {
   event.preventDefault();
   console.log('Scroll!')
})

div {
  background: yellow;
  height: 300px;
  width: 500px;
}

span {
  background-color: red;
  display: block;
  height: 100px;
  left: 200px;
  position: fixed;
  top: 100px;
  width: 100px;
  z-index: 10;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

<span></span>

Answer 1

How about calculating the area occupied by the box on the page, getting the mouse's page x/y, and checking if the mouse is inside the box's area:

$(document).on('wheel', function() {
  var offset = $('div').offset();
  var width = $('div').width();
  var height = $('div').height();

  if (lastEvent.pageX > offset.left && lastEvent.pageX < offset.left + width
        && lastEvent.pageY > offset.top && lastEvent.pageY < offset.top + height) {
    console.log('Scolled inside yellow box!');
  }
});

var lastEvent = {
  pageX: -1,
  pageY: -1
};

$(document).on('mousemove', function(event) {
  lastEvent = {
    pageX: event.pageX,
    pageY: event.pageY
  };
});

https://jsfiddle.net/37d9z411/