在Intersection观察器API中定位目标

问题描述

我仍在尝试使用Javascript交朋友，所以我也使用Intersection Observer API。我有三个目标元素正在监视它们在设备视口中的可见性：

    let $target_1 = section1.querySelector('.about-me');
    let $target_2 = section1.querySelector('.background');
    let $target_3 = section1.getElementsByClassName('content');

这是观察者的声明：

 let settings = {
     root: null,threshold: 0.15
 }

 let observer = new IntersectionObserver((entries) => {
     entries.forEach((entry) => {
         if(entry.intersectionRatio >= 0.15) {
             $target_1.classList.add('slide-in');
            
         }
     });
 },settings);

然后观察我的目标：

 observer.observe($target_1);
 observer.observe($target_2);
 observer.observe($target_3);

到目前为止，我相信当我的任何目标在视口中可见的比例为15％（0.15）时，都会调用回调函数（在“ IntersectionObserver”调用实例中作为第一个参数传递）。我的问题是，每当调用回调函数时，它将始终将'slide-in'类仅添加到'$ target_1'元素中。我想要的是，应该将“滑入”类添加到当前观察到的目标中。就像

 e.currentTarget.classList.add('slide-in')

之类。

我不想创建许多Intersection Observer实例来监视我的目标，即

 let observer = new IntersectionObserver( callback,options );
 let observer2 = new IntersectionObserver( callback,options );
 let observer3 = new IntersectionObserver( callback,options );

有没有一种方法可以访问当前观察到的目标元素？

解决方法

实际上非常简单，就像您通过事件访问目标一样。

看看下面的代码，我刚刚将访问元素的方式从$ target_1变量更改为函数参数的条目。

entry.target.classList.add('slide-in');

这是完整的代码：

 let settings = {
     root: null,threshold: 0.15
 }

 let observer = new IntersectionObserver((entries) => {
     entries.forEach((entry) => {
         if(entry.intersectionRatio >= 0.15) {
             entry.target.classList.add('slide-in');
            
         }
     });
 },settings);

intersection-observer javascript