Intersection Observer API 帮你搞定前端滚动标题

媒介

当我们在做需求时，大概常常会遇到许多跟页面的滚动有关的需求。比方

• 图片的懒加载：我们盼望只加载用户当前视图窗口的图片，而未进入到视图窗口的图片，只有在进入到视图窗口时才举行加载，以进步页面相应速率，从而改善用户体验。
  
• 无穷滚动：我们盼望在一个页面在不停下拉的过程中，不停的加载新的内容，而无需举行页面跳转，雷同于Vue、React等框架中的假造DOM的头脑，以提拔用户体验。
  
• 根据元素位置需求渲染元素：根据元素在视图窗口中的差异位置去举行一些或动画结果大概样式的改变。
  

当我们拿到这些需求的时间，大概各人开始想到的实现方法都是使用scroll监听，通常过不停轮询目的元素的位置信息，然后盘算是否符合特定条件，来举行操纵DON。但是，这种不停轮询方式会在JavaScript的主线程中不停实验，导致性能的极大斲丧，很轻易就会造成页面的掉帧，从而严厉影响用户体验，。
本日我们就来讲讲另一个更好的办理方案Intersection Observer API。它可以大概在资助我们实现需求的同时，镌汰性能的斲丧，从而提拔用户体验。

## `Intersection Observer`交织观察者。 > 官方界说： Intersection Observer是一个JavaScript API，用于异步监测目的元素与其先人元素或视口的交织环境。 平常点说就是，Intersection Observer可以资助我们监测一个元素是否进入或脱离另一个元素或欣赏器窗口的视口，而且可以正确到一个元素的可见比例
优点

• 性能强：
  
  
  
  • 异步处置惩罚：相比于传统scroll变乱监听的，Intersection Observer使用异步回调，制止了壅闭主线程，从而进步了性能。
    
  • 镌汰不须要的盘算：相比于传统的频仍地查抄元素的可见性，Intersection Observer只在元素的符合条件下才发生厘革时的回调，
    
  
  
• 使用简朴：
  
  
  
  • 无需手动检测：使用Intersection Observer，不再须要我们手动编写大量代码来检测元素是否在视口中，在开发更加简朴和可维护。
    
  
  
• 实时监测：
  
  
  
  • 实时反馈：它可以大概即时相应元素的可见性厘革，实用于须要实时反馈的交互结果。
    
  
  
• 正确度：
  
  
  
  • 自界说阈值：我们可以手动的设置触发回调的阈值，可以更正确度的根据需求来触发回调。
    
  
  
• 跨欣赏器兼容性：
  
  
  
  • 兼容性好：Intersection Observer是尺度的Web API，被主流欣赏器支持，具有较好的跨欣赏器兼容性。
    
  
  

用法

Intersection Observer API包罗4部门：构造函数、观察选项、回调函数和一些方法。

• 构造函数：IntersectionObserver
  构造函数用于创建Intersection Observer我们的实例，它继承两个参数：回调函数和观察选项。当被观察的元素和我们的窗口视图，大概别的元素的交织状态满意我们设定的观察选项时，我们的回调函数就会被触发。
  
  1. const observer = new IntersectionObserver(callback, options);

  复制代码
• 观察选项（Options）：
  观察选项是一个设置对象，用于指定我们的观察规则。它包罗3个属性：
  
  
  
  • root：根元素，用于指定一个容器元素，设为null时会默认使用视口作为根元素。
    
  • rootMargin：根元素的边距范围，用像素或百分比表现，该属性值是用作 root 元素和 target 发生交集时间的盘算交集的地域范围，用于扩大或缩小可视地域。
    
  • threshold：一个触发回调的阈值数组，表现目的元素的可见比例。
    
  
  

代码示例：

1. const options = {
2. root: document.querySelector('#container'), // 视口的根元素
3. rootMargin: '0px', // 例如 "10px 20px 30px 40px" (top, right, bottom, left)。
4. threshold: [0, 0.25, 0.5, 0.75, 1] //这里当目标元素的可见比例分别达到0％、25％、50％、75％和100％时，都会触发回调函数
5. };

复制代码

• 回调函数（Callback Function）：
  回调函数会在被观察的元素的交织状态发生厘革时被调用。它吸收两个参数：entries和observer。
  
  
  
  • entries：一个Intersection Observer Entry对象的数组，每个Entry对象表现一个被观察元素与视口或根元素的交织状态的信息。
    
  • observer：对观察器自己的引用，通常不须要使用。
    
  每个Entry对象包罗以下信息：
  
  1. `target`：被观察的目标元素，即触发了交叉事件的元素。
  2. `time`：发生相交到相应的时间，毫秒。
  3. `rootBounds`：根元素矩形区域的信息，如果没有设置根元素则返回 null，图中蓝色部分区域。
  4. `boundingClientRect`：一个DOMRect对象，描述了目标元素的边界框，包括位置、大小等信息。，图中黑色边框的区域。
  5. `intersectionRect`：一个DOMRect对象，表示目标元素与视口或根元素的交叉区域的边界框,图中蓝色方块和粉红色方块相交的区域。
  6. `intersectionRatio`：一个介于0和1之间的值，表示目标元素的可见比例，0表示完全不可见，1表示完全可见。
  7. -  `isIntersecting`：一个布尔值，表示目标元素是否与视口或根元素发生交叉。

  复制代码
  
  

代码示例：

1. // 创建一个 Intersection Observer 实例const observer = new IntersectionObserver(callback, options);
2. // 回调函数，处置惩罚相交变乱function callback(entries, observer) {entries.forEach(entry => { const target = entry.target; // 被观察的目的元素 const time = entry.time; // 发生相交的时间（毫秒） const rootBounds = entry.rootBounds; // 根元素的矩形地域信息 const boundingClientRect = entry.boundingClientRect; // 目的元素的边界框信息 const intersectionRect = entry.intersectionRect; // 目的元素与视口的交织地域信息 const intersectionRatio = entry.intersectionRatio; // 目的元素的可见比例 const isIntersecting = entry.isIntersecting; // 目的元素是否与视口发生交织 // 打印这些信息 console.log('目的元素：', target); console.log('发生相交的时间：', time); console.log('根元素矩形地域信息：', rootBounds); console.log('目的元素边界框信息：', boundingClientRect); console.log('交织地域信息：', intersectionRect); console.log('可见比例：', intersectionRatio); console.log('是否相交：', isIntersecting); // 根据须要实验操纵，比方加载图片或触发动画 if (isIntersecting) {   // 目的元素进入视口，实验干系操纵 } else {   // 目的元素脱离视口，实验其他操纵 }});}// 启动观察const targetElement = document.querySelector('#your-target-element'); // 选择要观察的目的元素observer.observe(targetElement); // 开始观察目的元素

复制代码

jcode
留意：

• 我们注册的回调函数将在主线程中实验，因此我们应该只管保持函数的实验速率。假如须要实验一些耗时大概会引起壅闭的操纵，发起使用 Window.requestIdleCallback() 方法。
  
• 在 Intersection Observer API 中，全部地域都被视为矩形。纵然元素的外形不规则，它也会被看作包罗该元素全部地域的最小矩形。同样，假如元素与视口的交集部门不是矩形，它也将被看作包罗全部交集地域的最小矩形。
  

• 方法：
  Intersection Observer实例还提供了一些方法，可以用于操纵观察器的举动：
  
  
  
  • observe(target)：将目的元素添加到观察器中，开始监测其交织状态。
    
  • unobserve(target)：制止监测特定目的元素的交织状态。
    
  • disconnect()：制止监测全部目的元素的交织状态，可以在不须要观察器时使用。
    
  示例：
  
  1. const observer = new IntersectionObserver(callback, options);
  2. observer.observe(document.querySelector('#element'));observer.unobserve(document.querySelector('#element'));observer.disconnect();

  复制代码
  
  

代码示例

以下是一个简朴的Intersection Observer示例，它会监测目的元素何时进入视口并改变其配景颜色：

1. <div id="target" style="height: 200px; background-color: lightblue;"></div><script>  const target = document.querySelector('#target');  const options = {    root: null,// 根元素，通常使用视口，可以设为null    rootMargin: '0px', // 根元素的边距，用于扩展或缩小可视地域    threshold: 0.5 // 触发回调的阈值，0表现完全不可见，1表现完全可见  };  const callback = (entries, observer) => {    entries.forEach(entry => {      if (entry.isIntersecting) {        target.style.backgroundColor = 'lightgreen';      } else {        target.style.backgroundColor = 'lightblue';      }    });  };  const observer = new IntersectionObserver(callback, options);
2.     //将观察器绑定到目的元素上，以开始监测可见性厘革。  observer.observe(target);</script>

复制代码

jcode

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金