z-index較高的元素滑輪

Question

當光標位於具有較高z-index的另一個元素上時，有什麼辦法可以在容器上啓用鼠標滾輪嗎？這裏是例子：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

如何計算由框中的網頁上所佔的面積，讓鼠標的頁面X/Y，並檢查是否鼠標框的區域內：

$(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/