前端判断节点是否进入到可视区域

方法一

可以使用 JavaScript 的 getBoundingClientRect() 方法来判断元素是否进入到可视区域。该Api针对于浏览器可视窗口返回元素的位置信息,所以不必考虑滚动条

getBoundingClientRect() 方法返回一个 DOMRect 对象，它包含了元素的位置和尺寸信息，可以用来判断元素是否进入到可视区域。

以下是一种示例代码，可以用来判断元素是否进入到可视区域：

function isElementInViewport(el) {
  var rect = el.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

这个函数接收一个参数 el，表示要判断的元素。如果元素进入到了可视区域，函数将返回 true，否则返回 false。

在函数内部，首先使用 getBoundingClientRect() 方法获取元素的位置和尺寸信息，然后比较元素的位置信息和可视区域的大小，来判断元素是否进入到了可视区域。

你可以将这个函数添加到你的代码中，然后传入要判断的元素，来判断元素是否进入到了可视区域。

方法二

除了使用 getBoundingClientRect() 方法，还有一种更简单的方法可以判断元素是否进入到可视区域，那就是使用 Intersection Observer（交叉观察器）API。

Intersection Observer API 是现代浏览器原生提供的 API，可以用来判断元素是否进入了可视区域。它可以观察元素与其祖先元素或视口之间的交叉状态，并在交叉状态发生变化时通知我们。

以下是一个使用 Intersection Observer API 的示例代码：

var observer = new IntersectionObserver(function(entries) {
  // entries是所有被观察元素的数组
  entries.forEach(function(entry) {
    // 判断被观察元素是否进入了可视区域
    if (entry.isIntersecting) {
      // 元素进入了可视区域
      console.log('元素进入了可视区域');
    } else {
      // 元素离开了可视区域
      console.log('元素离开了可视区域');
    }
  });
});

// 要观察的元素
var target = document.querySelector('#my-element');

// 开始观察元素
observer.observe(target);

在这个示例中，我们首先创建了一个 Intersection Observer 对象，用于观察元素是否进入了可视区域。然后选择要观察的元素，并调用 observe() 方法开始观察元素。当观察的元素进入或离开可视区域时，回调函数就会被调用，通过 isIntersecting 属性来判断元素是否进入了可视区域。

相比于使用 getBoundingClientRect() 方法来判断元素是否进入到可视区域，使用 Intersection Observer API 会更加简单方便，并且对于多个元素的观察也很方便。