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/