自定义光标在自动滚动时无法更新动画的问题求助

核心问题在于pointermove仅在指针移动时触发，当鼠标静止、内容滚动时，无法自动检测光标下方元素的变化。以下是具体可行的解决方案：

• 定时检测光标下方元素
  保存光标最新坐标，在指针停止移动后启动定时检测，对比当前光标下的带data-label元素与之前的元素，若发生变化则触发标签更新与动画逻辑：

  1. 在pointermove事件中记录最新的光标坐标（clientX/clientY），并在指针停止移动后启动定时检测（避免频繁检测影响性能）。
  2. 使用document.elementFromPoint(x, y)获取光标下的元素，通过closest('[data-label]')找到最近的带标签元素。
  3. 对比当前元素与上一次记录的元素，若不同则执行移出旧元素的动画逻辑，再执行新元素的hover动画逻辑。

• 结合渲染周期优化检测
  用requestAnimationFrame替代setInterval，让检测逻辑同步浏览器渲染周期，减少卡顿：

  let cursorCheckId = null;
  
  function startCursorCheckLoop() {
    cursorCheckId = requestAnimationFrame(function check() {
      checkCursorHover();
      cursorCheckId = requestAnimationFrame(check);
    });
  }
  
  // 停止检测时调用
  function stopCursorCheckLoop() {
    cancelAnimationFrame(cursorCheckId);
  }
  

• 性能优化细节

  • 指针移动时暂停定时检测，直接执行一次检测即可，避免重复逻辑。
  • 调整检测间隔（如100-200ms），平衡响应速度与性能消耗。
  • 页面卸载时务必清理定时器/动画帧，避免内存泄漏。

附完整实现示例：

let currentHoverEl = null;
let cursorCheckId = null;
let lastX = 0;
let lastY = 0;
const CHECK_INTERVAL = 100; // 检测间隔（ms）
let lastCheckTime = Date.now();

// 更新光标坐标并处理即时检测
document.addEventListener('pointermove', (e) => {
  lastX = e.clientX;
  lastY = e.clientY;
  checkCursorHover();
  
  // 指针移动时停止定时检测，后续自动重启
  stopCursorCheckLoop();
  setTimeout(startCursorCheckLoop, 500); // 指针静止500ms后启动检测
});

// 核心检测逻辑
function checkCursorHover() {
  // 控制检测频率，避免每帧都执行
  if (Date.now() - lastCheckTime < CHECK_INTERVAL) return;
  lastCheckTime = Date.now();

  const targetEl = document.elementFromPoint(lastX, lastY);
  const labeledEl = targetEl?.closest('[data-label]');

  if (labeledEl !== currentHoverEl) {
    const cursorTrail = document.querySelector('.cursor-trail');
    // 移出旧元素逻辑
    if (currentHoverEl) {
      cursorTrail.classList.remove('cursor-trail--hover');
      cursorTrail.classList.add('fade-out');
      setTimeout(() => {
        cursorTrail.textContent = '';
        cursorTrail.classList.remove('fade-out');
      }, 300);
    }

    currentHoverEl = labeledEl;

    // 移入新元素逻辑
    if (currentHoverEl) {
      cursorTrail.textContent = '';
      cursorTrail.classList.add('cursor-trail--hover', 'fade-in');
      cursorTrail.textContent = currentHoverEl.dataset.label;
      setTimeout(() => {
        cursorTrail.classList.remove('fade-in');
      }, 300);
    }
  }
}

// 启动/停止检测循环
function startCursorCheckLoop() {
  cursorCheckId = requestAnimationFrame(function loop() {
    checkCursorHover();
    cursorCheckId = requestAnimationFrame(loop);
  });
}

function stopCursorCheckLoop() {
  if (cursorCheckId) {
    cancelAnimationFrame(cursorCheckId);
    cursorCheckId = null;
  }
}

// 页面清理
window.addEventListener('beforeunload', stopCursorCheckLoop);

对应的CSS动画：

.cursor-trail {
  /* 你的光标基础样式 */
  transition: all 0.3s ease;
}

.fade-in {
  animation: fadeIn 0.3s ease forwards;
}

.fade-out {
  animation: fadeOut 0.3s ease forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(8px); }
}

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