鼠标滚轮滚动父DIV内部未触发子元素鼠标事件刷新问题

核心机制说明 #

物理移动鼠标时，浏览器会执行以下关键操作：

• 实时更新鼠标的视口坐标与滚动容器内的相对坐标
• 执行元素命中测试（Hit-Testing）：从鼠标位置向下遍历DOM树，找到最顶层的目标元素
• 基于命中结果更新元素的:hover伪类状态，并触发mouseover/mouseout等鼠标事件

而滚动容器时，鼠标的物理屏幕位置没有变化，浏览器默认不会重新执行命中测试——它认为鼠标对应的元素没有改变，因此不会自动更新:hover状态或触发鼠标事件。

代码实现方案 #

要通过代码模拟这个刷新机制，我们可以监听容器的滚动事件，手动执行命中测试，然后更新目标元素的状态：

修改后的完整代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="extra_parent_div">
  <div class="parent_div">
  </div>
</div>

<style>
.parent_div {
  height: 100px;
  overflow-y: scroll;
  background-color: red;
}

.extra_parent_div {
  padding: 50px;
}

.child_div {
  height: 40px;
  width: 100%;
  cursor: pointer;
}

.child_div:hover, .child_div.hover-active {
  background-color: white !important;
}
</style>

<script>
jQuery(document).ready(() => {
  let p = jQuery('.parent_div');
  var c;
  for(let i=0;i<20;i++) {
    c = Math.floor(Math.random()*16777215).toString(16);
    p.append('<div class="child_div" style="background-color:#'+c+'"></div>') 
  }

  // 记录鼠标在视口中的位置
  let mouseX = 0;
  let mouseY = 0;
  $(document).on('mousemove', (e) => {
    mouseX = e.clientX;
    mouseY = e.clientY;
  });

  // 监听父容器滚动事件，手动执行命中测试
  p.on('scroll', () => {
    // 获取父容器的位置信息
    const parentRect = p[0].getBoundingClientRect();
    // 计算鼠标在父容器内的相对坐标
    const relativeX = mouseX - parentRect.left;
    const relativeY = mouseY - parentRect.top + p[0].scrollTop;

    // 找到鼠标下方的子元素
    const target = document.elementFromPoint(mouseX, mouseY);
    if (target && target.classList.contains('child_div')) {
      // 移除所有子元素的模拟hover类
      p.find('.child_div').removeClass('hover-active');
      // 给目标元素添加模拟hover类
      $(target).addClass('hover-active');
      // 手动触发mouseover事件（如果需要）
      $(target).trigger('mouseover');
    } else {
      // 鼠标不在子元素上时清除所有hover状态
      p.find('.child_div').removeClass('hover-active');
    }
  });
});
</script>

方案说明 #

1. 记录鼠标位置：通过mousemove事件实时保存鼠标的视口坐标
2. 滚动时命中测试：使用document.elementFromPoint()方法获取当前鼠标位置对应的元素，这个方法会自动考虑滚动容器的偏移，相当于手动触发了浏览器的命中测试
3. 模拟hover状态：通过自定义CSS类.hover-active替代原生:hover的部分效果，同时可以手动触发mouseover事件满足业务逻辑需求

补充说明 #

• document.elementFromPoint()是核心API，它会直接返回鼠标位置最顶层的DOM元素，内部已经包含了浏览器的坐标计算与命中测试逻辑
• 若不需要触发mouseover事件，仅需视觉上的hover效果，仅用CSS类切换即可
• 注意性能：滚动事件触发频率较高，可通过防抖（debounce）优化，但对于小型列表影响不大

内容的提问来源于stack exchange，提问作者Nertan Lucian