你不知道的Js高级方法

1.getBoundingClientRect()

getBoundingClientRect() 是一个用于获取元素位置和尺寸信息的方法。它返回一个 DOMRect对象，其提供了元素的大小及其相对于视口的位置，其中包含了以下属性：

• x：元素左边界相对于视口的 x 坐标。
• y：元素上边界相对于视口的 y 坐标。
• width：元素的宽度。
• height：元素的高度。
• top：元素上边界相对于视口顶部的距离。
• right：元素右边界相对于视口左侧的距离。
• bottom：元素下边界相对于视口顶部的距离。
• left：元素左边界相对于视口左侧的距离。

const box = document.getElementById('box');
const rect = box.getBoundingClientRect();

console.log(rect.x);        // 元素左边界相对于视口的 x 坐标
console.log(rect.y);        // 元素上边界相对于视口的 y 坐标
console.log(rect.width);    // 元素的宽度
console.log(rect.height);   // 元素的高度
console.log(rect.top);      // 元素上边界相对于视口顶部的距离
console.log(rect.right);    // 元素右边界相对于视口左侧的距离
console.log(rect.bottom);   // 元素下边界相对于视口顶部的距离
console.log(rect.left);     // 元素左边界相对于视口左侧的距离

应用场景：

这个方法通常用于需要获取元素在视口中的位置和尺寸信息的场景，比如实现拖拽、定位或响应式布局等，兼容性很好，一般用滚动事件比较多。

特殊场景会用上，比如你登录了淘宝的网页，当你下拉滑块的时候，下面的图片不会立即加载出来，有一个懒加载的效果。当上面一张图片没在可视区内时，就开始加载下面的图片。

2.intersectionObserver

IntersectionObserver 是一个构造函数，可以接收两个参数，第一个参数是一个回调函数，第二个参数是一个对象。这个方法用于观察元素相交情况，它可以异步地监听一个或多个目标元素与其祖先元素或视口之间的交叉状态。它提供了一种有效的方法来检测元素是否可见或进入视口。

使用 IntersectionObserver 可以方便地检测元素是否可见或进入视口，并在满足条件时执行相应的操作。IntersectionObserver 是一个现代的浏览器 API，用于监测元素与其祖先或视口的交叉状态。以下是使用 IntersectionObserver 的基本步骤：

创建 IntersectionObserver 实例：

const options = {
  root: null, // 视口，null表示浏览器视口
  rootMargin: '0px', // 视口的margin，可以用来预先加载元素
  threshold: 0.5 // 交叉比例，0.5表示元素可见部分超过50%时触发
};

const observer = new IntersectionObserver(callback, options);

定义回调函数：

const callback = (entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 元素进入视口或可见时触发的操作
      console.log('元素进入视口或可见:', entry.target);
    } else {
      // 元素离开视口或不可见时触发的操作
      console.log('元素离开视口或不可见:', entry.target);
    }
  });
};

将需要观察的元素添加到 IntersectionObserver：

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

以上代码中，IntersectionObserver 实例会观察 targetElement 元素，并在其进入或离开视口时触发回调函数 callback，根据 entry.isIntersecting 属性来判断元素的交叉状态。

需要注意的是，IntersectionObserver 是一个异步的API，因此在使用时需要确保元素已经被渲染到页面上。如果需要观察多个元素，可以通过多次调用 observer.observe() 来添加多个观察目标。

此外，IntersectionObserver 还提供了一些其他的配置选项和方法，可以根据具体需求进行调整和使用。更多关于 IntersectionObserver 的详细说明和示例可以查阅 MDN 文档：Intersection Observer API - Web APIs | MDN