MENU

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

• April 1, 2023 • Read: 628 • Life

方法一

可以使用 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 会更加简单方便,并且对于多个元素的观察也很方便。

Last Modified: May 15, 2023
Archives QR Code
QR Code for this page
Tipping QR Code
Leave a Comment

2 Comments
  1. 测试评论IP归属#(中枪)

  2. 你写得非常清晰明了,让我很容易理解你的观点。