Нацеливание на цель в API наблюдателя пересечений

Я все еще пытаюсь подружиться с Javascript, так же как и с API Intersection Observer. У меня есть три целевых элемента, которые отслеживают их видимость в окне просмотра устройства:

    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);

So far, I believe that when any of my targets is 15% (0.15) visible in the viewport, the callback function (passed as first argument in the instance of 'IntersectionObserver' call), will be invoked. My problem is that, whenever the callback function is invoked, it will always add the 'slide-in' class to only the '$target_1' element. What i want is that, the 'slide-in' class should be added to the currently observed target. Just something like 

 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 );

Есть ли способ получить доступ к наблюдаемому в данный момент целевому элементу?


javascript intersection-observer
person hane Smitter    schedule 23.08.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

На самом деле это очень просто и похоже на то, что вы получаете доступ к цели из события.

Посмотрите на приведенный ниже код. Я только что изменил способ доступа к элементу из переменной $ 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);

person Terminat    schedule 23.08.2020