时间戳

首页 > 解决方案 > 在 Intersection Observer API 中定位目标

javascript - 在 Intersection Observer 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”调用实例中的第一个参数传递）。我的问题是，每当调用回调函数时，它总是将“滑入”类仅添加到“$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 );

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

标签： javascriptintersection-observer

解决方案

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

请看下面的代码，我刚刚将您从 $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);

推荐阅读