교차 관찰자가 형제와 함께 작동하지 않음

산드리나 -P

4 개의 자식이있는 flexbox 컨테이너가 있으며 각 컨테이너에는 with:50%.

각 자식에 대해 IO (Intersection Observer)를 만들고 싶지만 어떤 이유로 1º 및 3º 요소에서만 작동합니다. 그러나 2º 및 4º 요소에 대해 새 IO를 만들면 작동합니다.

내가 도대체 ​​뭘 잘못하고있는 겁니까?

데모 : https://codepen.io/sandrina-p/pen/mddzpzW

TKoL

다음과 같은 코드가 있습니다.

const watchContainer = ([entry]) => {
    console.log('IO card:', entry.target);
    entry.target.style.opacity = entry.isIntersecting ? '1' : '0';
};

다음과 같아야합니다.

const watchContainer = (entries) => {
    entries.forEach(entry => {
        console.log('IO card:', entry.target);
        entry.target.style.opacity = entry.isIntersecting ? '1' : '0';
    })
};

당신이 가진 방식으로, 둘 이상의 요소가 동시에 관찰자를 트리거하는 경우 첫 번째 요소에서만 함수를 실행합니다. 내가 가진 방식은 일치하는 모든 항목에서 실행됩니다.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

EventEmitter 청취가 관찰자와 함께 작동하지 않음 (알파 44)

분류에서Dev

removeChild 함수가 setTimeout 함수와 함께 작동하지 않음

분류에서Dev

교차 관찰자가 예상대로 작동하지 않습니다.

분류에서Dev

Flutter Google지도와 Firebase가 함께 작동하지 않음

분류에서Dev

링크와 이미지가 함께 작동하지 않음

분류에서Dev

교차 도메인 문제 --jsonp가 작동하지 않음

분류에서Dev

Java 교차 메서드가 제대로 작동하지 않음

분류에서Dev

다음 형제 결합자는 복잡한 선택기와 함께 작동하지 않아야합니다.

분류에서Dev

UmbracoTemplatePage와 강력한 형식의 뷰가 함께 작동하지 않음

분류에서Dev

Firebase Crashlytics가 DJI iOS SDK와 함께 작동하지 않음

분류에서Dev

PHP와 AJAX가 함께 작동하지 않음

분류에서Dev

AspectJ와 Springboot가 함께 작동하지 않음

분류에서Dev

"watch"와 함께 사용할 때 "awk"가 작동하지 않음

분류에서Dev

--chmod가 인덱스 필터와 함께 작동하지 않음

분류에서Dev

smbpasswd가 --disabled-password 및 --gecos와 함께 작동하지 않음 ''

분류에서Dev

jquery Chosen 및 mCustomScrollbar가 함께 제대로 작동하지 않음

분류에서Dev

Elastic Lucene 쿼리가 날짜와 함께 제대로 작동하지 않음

분류에서Dev

후행 슬래시와 함께 작동하지 않는 C # 문자열 비교

분류에서Dev

set mutator와 함께 기본값 오류가 없으며 업데이트 관찰자가 작동하지 않습니다.

분류에서Dev

글꼴 두께와 글꼴 크기가 함께 작동하지 않음

분류에서Dev

HIghChart의 동적 데이터와 함께 원형 차트가 제공되지 않습니다.

분류에서Dev

HIghChart의 동적 데이터와 함께 원형 차트가 제공되지 않습니다.

분류에서Dev

HIghChart의 동적 데이터와 함께 원형 차트가 제공되지 않습니다.

분류에서Dev

교차 관찰자가 600px 뷰포트 (+ GSAP) 아래에서 작동하지 않습니다.

분류에서Dev

jpql (NamedQuery) 하위 쿼리가 매개 변수와 함께 작동하지 않음

분류에서Dev

: not (: placeholder-shown)은 Adjacent 형제 결합 자와 함께 작동하지 않습니다.

분류에서Dev

Intersection Observer API가 숨겨진 요소와 함께 작동하지 않음

분류에서Dev

cygwin "Bash Prompt Here"가 움라우트와 함께 작동하지 않음

분류에서Dev

HyperlinkedRelatedField가 to_internal_value와 함께 작동하지 않음 (Django Rest Framework)

Related 관련 기사

  1. 1

    EventEmitter 청취가 관찰자와 함께 작동하지 않음 (알파 44)

  2. 2

    removeChild 함수가 setTimeout 함수와 함께 작동하지 않음

  3. 3

    교차 관찰자가 예상대로 작동하지 않습니다.

  4. 4

    Flutter Google지도와 Firebase가 함께 작동하지 않음

  5. 5

    링크와 이미지가 함께 작동하지 않음

  6. 6

    교차 도메인 문제 --jsonp가 작동하지 않음

  7. 7

    Java 교차 메서드가 제대로 작동하지 않음

  8. 8

    다음 형제 결합자는 복잡한 선택기와 함께 작동하지 않아야합니다.

  9. 9

    UmbracoTemplatePage와 강력한 형식의 뷰가 함께 작동하지 않음

  10. 10

    Firebase Crashlytics가 DJI iOS SDK와 함께 작동하지 않음

  11. 11

    PHP와 AJAX가 함께 작동하지 않음

  12. 12

    AspectJ와 Springboot가 함께 작동하지 않음

  13. 13

    "watch"와 함께 사용할 때 "awk"가 작동하지 않음

  14. 14

    --chmod가 인덱스 필터와 함께 작동하지 않음

  15. 15

    smbpasswd가 --disabled-password 및 --gecos와 함께 작동하지 않음 ''

  16. 16

    jquery Chosen 및 mCustomScrollbar가 함께 제대로 작동하지 않음

  17. 17

    Elastic Lucene 쿼리가 날짜와 함께 제대로 작동하지 않음

  18. 18

    후행 슬래시와 함께 작동하지 않는 C # 문자열 비교

  19. 19

    set mutator와 함께 기본값 오류가 없으며 업데이트 관찰자가 작동하지 않습니다.

  20. 20

    글꼴 두께와 글꼴 크기가 함께 작동하지 않음

  21. 21

    HIghChart의 동적 데이터와 함께 원형 차트가 제공되지 않습니다.

  22. 22

    HIghChart의 동적 데이터와 함께 원형 차트가 제공되지 않습니다.

  23. 23

    HIghChart의 동적 데이터와 함께 원형 차트가 제공되지 않습니다.

  24. 24

    교차 관찰자가 600px 뷰포트 (+ GSAP) 아래에서 작동하지 않습니다.

  25. 25

    jpql (NamedQuery) 하위 쿼리가 매개 변수와 함께 작동하지 않음

  26. 26

    : not (: placeholder-shown)은 Adjacent 형제 결합 자와 함께 작동하지 않습니다.

  27. 27

    Intersection Observer API가 숨겨진 요소와 함께 작동하지 않음

  28. 28

    cygwin "Bash Prompt Here"가 움라우트와 함께 작동하지 않음

  29. 29

    HyperlinkedRelatedField가 to_internal_value와 함께 작동하지 않음 (Django Rest Framework)

뜨겁다태그

보관