在屏幕上显示div时运行mousemove脚本

Question

我正在使用mousemove事件在页面上移动较大滚动的不同标题。我的问题是因为我在许多标题中都使用了这种效果，所以动画会变慢，因为同时运行所有效果。

window.addEventListener('mousemove', handleMouseMove);
const spansSlow = document.querySelectorAll('.line-item-top, .explainervideo .flex, .lyricvideos .flex, .videoclips .flex, .socialmedia .flex, .footer-block .flex.line-1');
const spansSlowmid = document.querySelectorAll('.footer-block .flex.line-2');
const spansFast = document.querySelectorAll('.line-item-bottom, .footer-block .flex.line-3');


let width = window.innerWidth;

function handleMouseMove(e) {
  let normalizedPosition = e.pageX / (width/2) - 1;
  let speedSlow = 90 * normalizedPosition;
  let speedSlowmid = 100 * normalizedPosition;
  let speedFast = 120 * normalizedPosition;
  spansSlow.forEach((span) => {
    span.style.transform = `translateX(${speedSlow}px)`;
  });

  spansSlowmid.forEach((span) => {
    span.style.transform = `translateX(${speedSlowmid}px)`;
  });

  spansFast.forEach((span) => {
    span.style.transform = `translateX(${speedFast}px)`
  })
}

我当时正在考虑如何解决此问题，我认为最好的方法是是否可以放置任何代码，以便仅在div屏幕上显示效果。但是我不知道这是否是最好的方法。

因此，我仅在屏幕上显示de DIV时才需要为每个DIV运行mousemove功能，因此不会同时运行所有效果，从而降低了我的网络速度。