鼠标滚轮滚动动画结束后在光标下捕获列表项

Question

我希望这件事受到欢迎。

我注意到，当鼠标作为鼠标JavaScript onMouseEnter事件的结果输入元素时，wheel事件不会触发。

此外，在触发事件时，event.target的wheel事件捕获光标所在的元素(而不是滚动动画之后光标下面的元素)。

在鼠标轮执行的滚动动画完成后，是否有任何方法来捕获光标下面的元素？

更新:这只发生在边缘。

这里打开了一个bug报告：https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/15836400/

Answer 1

当鼠标由于轮子事件而进入元素时，onmouseenter确实会触发，而当动画完成时，event.target确实会以该事件为目标。

如果不是这样的话，您可能会遇到CSS overflow问题，这会导致您的一个元素与您试图针对的元素重叠。

在滚动之后，要将元素作为目标，只需检查e.target，如下所示：

​

document.getElementById('outer').onmouseover = e => {
  console.clear();
  console.log(e.target);
}

#outer {
  border: 1px solid black;
  padding: 50px;
  margin: 300px 0 200px 0;
}

#inner {
  background: cyan;
  padding: 10px;
}

<div id="outer">
  <span id="inner">Mouse over me!</span>
</div>

​

希望这能有所帮助！