[英]Mousewheel over element with higher z-index
Is there any way to enable mousewheel on container, when cursor is over the another element with higher z-index? 当光标位于具有更高z-index的另一个元素上时,有没有办法在容器上启用鼠标滚轮? Here is example: https://jsfiddle.net/dkdghj7r/ . 这是一个例子: 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>
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: 如何计算页面上框的占用面积,获取鼠标页面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/ https://jsfiddle.net/37d9z411/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.