快速滚动时，应使用什么事件即时检测光标悬停元素？

1. 用 pointerenter 替代 mouseover #

pointerenter 属于Pointer Events规范，相比mouseover，它不会因快速滚动被浏览器性能优化跳过，且不会冒泡，更适合检测指针是否进入元素。

2. 监听 scroll 事件结合元素可见性检测 #

如果是滚动容器内的元素，直接监听容器的scroll事件，在回调里通过getBoundingClientRect()判断目标元素是否进入可视范围：

const container = document.getElementById('scroll-container');
const targetElement = document.getElementById('target');

container.addEventListener('scroll', () => {
  const rect = targetElement.getBoundingClientRect();
  const containerRect = container.getBoundingClientRect();
  // 判断元素是否处于容器可视区域内
  const isVisible = rect.top < containerRect.bottom && rect.bottom > containerRect.top;
  if (isVisible) {
    // 执行你的业务逻辑
    console.log('元素进入可视范围');
  }
});

3. 使用 IntersectionObserver API（推荐） #

这是浏览器原生的交叉观察器，专门用于监听元素与视口（或指定容器）的交叉状态，性能优于手动监听scroll检测，且快速滚动时不会漏检：

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 元素进入可视范围时执行逻辑
      console.log('元素可见');
    } else {
      // 元素离开可视范围时执行逻辑
      console.log('元素不可见');
    }
  });
}, {
  root: document.getElementById('scroll-container'), // 可选，指定滚动容器，默认是视口
  threshold: 0.1 // 元素有10%可见时触发回调
});

const targetElement = document.getElementById('target');
observer.observe(targetElement);

另外补充：wheel事件在快速滚动时浏览器会合并事件以提升性能，若要跟踪滚动状态，建议优先用scroll事件，它会在滚动过程中持续触发。

内容的提问来源于stack exchange，提问作者Oleg Garkusha