Question

当光标位于具有更高z-index的另一个元素上时，有没有办法在容器上启用鼠标滚轮？以下是示例：https://jsfiddle.net/dkdghj7r/。

＆＃13;

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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/

具有较高z-index的元素上的鼠标滚轮

1 个答案: